用伪元素+transform:scaley(0.5)可稳定实现移动端1px边框，需设position:relative、height:1px、transform-origin:0 100%、pointer-events:none及-webkit前缀，四边则用scale(0.5)+box-sizing:border-box+transform-origin:0 0。
直接写 border: 1px 在 iPhone 或高 DPR 安卓机上就是会变粗，这不是 bug，是设备像素比（dpr）导致的物理渲染结果；真正能稳定落地的解法，是用伪元素 + transform: scaleY(0.5) 主动控制渲染精度，而不是依赖浏览器对 0.5px 的支持。
为什么不能直接用 border-width: 0.5px
绝大多数 WebView 不支持非整数 px 边框宽度：0.5px 在 iOS Safari 13+ 才开始有限支持，安卓低版本（如 UC、QQ 浏览器）直接忽略或四舍五入为 1px；0.33px 更是普遍被解析成 1px —— 实测中 getComputedStyle(el).borderWidth 仍返回 "1px"。这不是兼容性补丁能解决的问题，是渲染引擎底层限制。
::after + scaleY(0.5) 实现下边框的关键细节
这个写法看着简单，但漏掉任一条件都会错位或失效：
- 父元素必须设
position: relative，否则::after会相对于body定位 -
::after要用height: 1px+background-color，别用border-bottom: 1px—— 后者缩放后易模糊、受盒模型干扰 -
transform-origin必须显式写成0 100%（左下角），不能只写bottom，部分 Safari 版本会失效 - 必须加
pointer-events: none，否则伪元素可能拦截点击，尤其在安卓 WebView 中 - 要加
-webkit-transform和-webkit-transform-origin前缀，iOS 12–15 对无前缀属性支持不稳定
四边边框与不同 dpr 设备的适配要点
单边缩放好处理，四边一起缩放容易出偏移和露白：
- 伪元素尺寸设为
width: 200%; height: 200%，border: 1px solid #000，再transform: scale(0.5) -
transform-origin改为0 0（左上角），确保缩放锚点稳定 - 必须显式声明
box-sizing: border-box，否则默认content-box会让边框外扩，缩放后位置飘移 - 硬写
scale(0.5)只覆盖dpr=2；dpr=3（如 iPhone 12+）建议用媒体查询兜底：@media (-webkit-min-device-pixel-ratio: 3)内改用scale(0.333) - Safari 对
scale(0.333)子像素渲染不稳定，dpr=3场景更推荐box-shadow或linear-gradientfallback
真正踩过坑的人知道：缩放后的伪元素如果没设 pointer-events: none，某些安卓 WebView 下 touch 事件会丢失；transform-origin 写成 left bottom 而非 0 100%，在真机上就可能抬高半像素——这些细节不连真机调试根本发现不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
