最稳解法是::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？
这不是 bug，是设备像素比（window.devicePixelRatio）导致的自然映射结果。iPhone 8（dpr=2）、iPhone 13（dpr=3）这类设备中，1 个 CSS 像素对应 2 或 3 个物理像素，浏览器不会“降采样”边框，而是把 border: 1px 拉伸渲染成 2 或 3 物理像素宽，再叠加抗锯齿，视觉上就发虚、偏粗。硬写 border-width: 0.5px 在多数安卓 WebView 和旧版 Safari 中会被忽略或向上取整为 1px，实测 getComputedStyle(el).borderWidth 仍返回 "1px"。
::after + scaleY(0.5) 怎么写才不偏位？
缩放本身不难，错位才是真坑。关键不在 scaleY(0.5)，而在定位基点和父容器约束：
- 父元素必须设
position: relative，否则::after的position: absolute会脱标定位到body -
transform-origin必须显式写成0 100%（左下角），才能让scaleY(0.5)从底部向上压缩，不破坏对齐；写成bottom或left bottom在部分 Safari 版本里会失效 - 伪元素推荐用
height: 1px+background-color，别用border-bottom: 1px——后者受盒模型影响，缩放后内容区容易被挤，边缘还易模糊 - 务必加
pointer-events: none，否则某些安卓 WebView 下伪元素会拦截点击事件 - 要加
-webkit-transform和-webkit-transform-origin前缀，iOS 12–15 对无前缀支持不稳定
四边都加 1px 边框时，box-sizing 不能省
单边用 scaleY 或 scaleX 没问题，但四边一起缩放必须整体处理，否则干扰布局：
- 伪元素设
top: 0; left: 0; right: 0; bottom: 0;，再用transform: scale(0.5)整体缩放 - 必须显式写
box-sizing: border-box，否则默认box-sizing: content-box会让边框外扩 1px，缩放后四角错位、边缘溢出、甚至出现半像素黑线 -
transform-origin改为0 0（左上角），确保锚点稳定，不因内容变化偏移 - 父容器若有
overflow: hidden，缩放后伪元素可能被裁——因为缩放基于原始尺寸计算，坐标系未同步收缩
真正容易被忽略的是：伪元素的 content 必须是非空字符串（哪怕只是 ''），且 background-color 必须显式指定，无法自动继承父级颜色；圆角边框用此法会失真，此时应改用 background: linear-gradient 模拟，或由父容器通过 border-radius + overflow: hidden 裁剪伪元素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
