iphone及高dpr安卓机上border:1px显粗是因设备像素比导致，需用::after+transform scaley(0.5)等方案实现视觉1px，注意定位锚点、box-sizing、transform-origin及content非空等细节。
直接写 border: 1px 在 iPhone 或高 DPR 安卓机上必然显粗，这不是写错了，是设备像素比（window.devicePixelRatio）导致的物理渲染结果；想视觉上“真·1px”，必须绕过浏览器对 border 的默认映射逻辑。
为什么不能直接用 border-width: 0.5px
绝大多数浏览器不支持非整数 px 边框宽度：0.5px 在 iOS Safari 13+ 才开始有限支持，安卓 WebView（尤其 Android 4.x、UC、QQ 浏览器）普遍四舍五入为 1px 或直接忽略；0.33px 更常被解析为 0px。实测中 getComputedStyle(el).borderWidth 仍返回 "1px"，这不是 bug，是渲染引擎的硬性限制。
::after + transform: scaleY(0.5) 怎么写才不偏位
关键不在缩放值本身，而在定位锚点和盒模型控制：
- 父元素必须设
position: relative，否则::after的bottom: 0会相对于body定位 -
::after推荐用height: 1px+background-color，别用border-bottom: 1px——后者受盒模型影响，缩放后边缘易模糊 -
transform-origin必须显式设为0 100%（即left bottom），否则缩放中心默认在中点，边框会上浮露白 - 务必加
pointer-events: none，否则某些安卓 WebView 下伪元素会拦截点击事件 - iOS 12–15 对无前缀
transform支持不稳定，要补-webkit-transform和-webkit-transform-origin
四边都加 1px 边框时怎么防错位
单边用 scaleY 或 scaleX 没问题，但四边一起缩放必须整体处理，否则干扰布局：
- 伪元素设
top: 0; left: 0; right: 0; bottom: 0;，再用width: 200%; height: 200%+transform: scale(0.5)整体缩放 - 必须显式写
box-sizing: border-box到伪元素上，否则默认content-box会让边框外扩1px，缩放后四角错位、边缘溢出 -
transform-origin改为0 0（左上角），确保缩放锚点稳定，不因内容变化偏移 - 父容器若有
overflow: hidden，缩放后伪元素可能被裁——因为缩放基于原始200%尺寸计算，坐标系未同步收缩
真正容易被忽略的是：::after 的 content 必须是非空字符串（哪怕只是 ''），且 background-color 必须显式指定，无法自动继承父级颜色；圆角边框用此法会失真，此时应改用 background: linear-gradient 模拟，或由父容器用 border-radius + overflow: hidden 裁剪伪元素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
