最稳解法是::after伪元素+transform:scaleY(0.5)，因DPR≥2时1px映射为2+物理像素而变粗；需父元素position:relative、transform-origin:0 100%防偏位，伪元素用height:1px+background-color并加pointer-events:none。
直接用 ::after 伪元素配合 transform: scaleY(0.5) 是目前最稳、最可控的解法，比硬写 0.5px 或改 viewport 更可靠。
为什么 border: 1px 在真机上看起来像 2px
CSS 的 px 是逻辑单位，不是物理像素。当 window.devicePixelRatio === 2（如 iPhone 8、多数安卓旗舰），1 个 CSS 像素会被浏览器映射到 2 个物理像素上。border: 1px 就自然铺满这 2 个像素——浏览器不会降采样，只是照搬映射关系。DPR=3 设备更甚，视觉上就是一条糊糊的粗线。
::after + scaleY(0.5) 怎么写才不偏位
缩放本身不难，错位才是真坑。关键不在 scaleY(0.5)，而在定位基点和父容器约束：
- 父元素必须设
position: relative，否则::after会相对于body定位 -
transform-origin必须显式写成0 100%（左下角），才能让缩放从底部向上压；写成bottom在部分 Safari 版本里会失效 - 伪元素推荐用
height: 1px+background-color，别用border-bottom: 1px——后者受盒模型影响，缩放后内容区容易被挤 - 务必加
pointer-events: none，否则某些安卓 WebView 下伪元素会拦截点击事件 - iOS 12–15 对无前缀
transform支持不稳定，要补-webkit-transform
四边边框怎么安全实现
单边用 scaleY 或 scaleX 没问题，但四边一起缩放必须整体处理，否则干扰布局：
立即学习“前端免费学习笔记（深入）”；
- 伪元素尺寸设为
width: 200%、height: 200%，画border: 1px solid #000，再整体transform: scale(0.5) -
transform-origin改为0 0（左上角），确保锚点稳定 - 必须加
box-sizing: border-box到伪元素上，否则缩放后边框位置会飘移 - 父容器若有
overflow: hidden，缩放后的伪元素可能被裁掉——因为缩放基于原始尺寸计算，will-change: transform可提升到 GPU 图层防模糊 - 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 版本里会失效。这些细节不试真机根本发现不了。
