移动端1px边框变粗是因高DPR设备将CSS 1px映射为2或3物理像素，解决方案是用伪元素配合transform: scale(1/dpr)缩放至1物理像素，并设transform-origin和pointer-events: none。
直接写 border: 1px 在 iPhone 或高 DPR 安卓机上就是会变粗，这不是你代码写错了，是浏览器按规范把 1 个 CSS 像素映射到了 2 或 3 个物理像素上。
为什么 1px 在高清屏上实际渲染成 2px？
CSS 的 px 是逻辑单位，不是物理单位。当 window.devicePixelRatio === 2（比如 iPhone 8 及之后多数机型），1 个逻辑像素对应 2 个物理像素，border: 1px 就会被铺满这 2 个物理像素，视觉上自然像 2px 粗。浏览器不会“抗锯齿降采样”，它只是照搬映射关系。
- 不支持
0.5px的 WebView（如旧版安卓 UC、QQ 浏览器）会直接忽略或当0px处理 -
box-shadow: inset 0 0 0 0.5px在 Firefox 下可能渲染不准，Chrome 偏好但 Safari 有时虚边 -
border-image+linear-gradient要额外维护渐变色值，换主题时得同步改两处
::after + transform: scaleY(0.5) 怎么写才不偏位？
缩放本身不难，错位才是真坑。关键不在 scaleY(0.5)，而在定位基点和父容器约束。
- 父元素必须设
position: relative，否则::after的absolute定位会脱标 -
transform-origin必须显式写成0 100%（左下角），才能让缩放从底部向上压，不漂移 - 伪元素用
height: 1px+scaleY(0.5)，别用border-bottom: 1px—— 后者受盒模型影响，缩放后内容区容易被挤 - 加
pointer-events: none，防止伪元素遮挡点击区域
四边边框怎么安全实现？
单边用 scaleY 或 scaleX 没问题，但四边一起缩放必须整体处理，否则会干扰布局。
- 伪元素尺寸设为
width: 200%; height: 200%，border: 1px solid #000，再transform: scale(0.5) -
transform-origin改为0 0（左上角），确保锚点稳定 - 必须加
box-sizing: border-box，否则缩放后边框位置会飘 - DPR=3 设备可补媒体查询：
@media (-webkit-min-device-pixel-ratio: 3) { .border-all::after { transform: scale(0.333); } }
最易被忽略的点：缩放后的伪元素如果没设 pointer-events: none，在某些安卓 WebView 下会拦截 touch 事件；另外，transform-origin 写成 bottom 而非 0 100%，在部分 Safari 版本里会失效。这些细节不试真机根本发现不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
