::after伪元素配合transform: scaley(0.5)是最稳解法，因dpr导致1px在高倍屏渲染变粗，而0.5px兼容差、viewport缩放破坏布局；需设position: relative、transform-origin: 0 100%、height: 1px，并避免border属性干扰盒模型。
直接用 ::after 伪元素配合 transform: scaleY(0.5) 是目前最稳、最可控的解法，比硬写 0.5px 或改 viewport 更可靠。
为什么 border: 1px 在手机上看起来像 2px？
根本原因是设备像素比（devicePixelRatio）：iPhone 6/7/8 的 dpr=2，CSS 里写的 1px 会被浏览器渲染成 2 个物理像素宽；dpr=3 的安卓机更甚。浏览器不会“降采样”，只是把 1 CSS 像素拉伸到对应数量的物理像素上，插值后就发虚变粗。
常见错误现象：
- 写了
border-bottom: 1px solid #eee，真机上看就是一条糊糊的粗灰线 - 直接写
border: 0.5px，旧版安卓 WebView 当作0px渲染，边框直接消失 - 改
viewport缩放后，字体、间距全乱，适配成本爆炸
::after + scaleY(0.5) 怎么写才不偏位？
关键不在缩放本身，而在定位基点和父容器约束。缩放默认以中心为原点，会导致伪元素下移或上浮。
- 父元素必须设
position: relative，否则::after的position: absolute定位失效 -
transform-origin必须显式设为0 100%（左下角），才能让scaleY(0.5)从底部向上压缩，不破坏对齐 - 伪元素推荐写
height: 1px+transform: scaleY(0.5)，语义比写2px更清晰 - 别用
border属性画伪边框——它受盒模型影响，缩放后内容区可能被挤窄
四边都想要 1px 边框，scale(0.5) 会压扁内容吗？
不会压扁内容，但会干扰盒模型。如果直接给元素加 border: 2px 再缩放，border 仍计入 width/height，导致内容区变窄。
- 正确做法：伪元素撑开
200% × 200%区域，画border: 1px，再整体transform: scale(0.5) - 必须加
box-sizing: border-box，否则缩放后边框位置飘移 -
transform-origin改为0 0（左上角），确保缩放锚点稳定 - 安卓低版本 WebView 对
scaleY支持弱，四边场景统一用scale(0.5)更稳妥 - 加
pointer-events: none，避免伪元素挡住点击事件
容易被忽略的细节
缩放后的伪元素可能被父容器的 overflow: hidden 裁掉——因为 scale(0.5) 后坐标系变小，但绝对定位仍按原始盒模型计算；will-change: transform 或 -webkit-backface-visibility: hidden 可提升到 GPU 图层防模糊；颜色无法继承 border-color，得用 background-color 或 CSS 变量手动管理；圆角需由父容器用 border-radius + overflow: hidden 裁剪伪元素，不能直接在伪元素上设 border-radius。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
