最稳解法是::after伪元素配合transform:scaleY(0.5)，因硬写border-width:0.5px在旧安卓WebView中被忽略，而dpr=2时1px CSS像素实际渲染为2物理像素；关键需设父元素position:relative、transform-origin:0 100%、height:1px+background-color及pointer-events:none。
直接用 ::after 伪元素配合 transform: scaleY(0.5) 是目前最稳的解法，硬写 border-width: 0.5px 在旧版安卓 WebView（如 UC、QQ 浏览器）里会被忽略，viewport 缩放则会连带搞乱字体和点击区域。
为什么 border: 1px 在手机上看起来像 2px？
这不是 bug，是设备像素比（dpr）导致的物理渲染结果。iPhone 8、多数安卓旗舰的 window.devicePixelRatio === 2，1 个 CSS 像素对应 2 个物理像素，浏览器不会降采样边框，而是把 1px 直接铺满这 2 个像素——所以你看到的是实打实的 2 物理像素宽。
::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 下伪元素会拦截点击事件
四边边框用 scale(0.5) 为什么总出问题？
单边用 scaleY 或 scaleX 没问题，但四边一起缩放必须整体处理，否则会干扰布局：
- 伪元素尺寸设为
width: 200%、height: 200%，画border: 1px solid #000，再transform: scale(0.5) -
transform-origin改为0 0（左上角），确保锚点稳定 - 必须加
box-sizing: border-box，否则缩放后边框位置会飘移 - 父容器若有
overflow: hidden，缩放后伪元素可能被裁掉（因缩放基于原始尺寸计算）
真正容易被忽略的是：伪元素的 content 必须是非空字符串（哪怕只是 ''），且 background-color 必须显式指定——它无法自动继承父级颜色；圆角场景下，别在伪元素上直接设 border-radius，改用父容器 overflow: hidden 裁剪更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
