::after伪元素配合transform: scaleY(0.5)是最稳解法，因1px在dpr≥2设备上被拉伸为多物理像素，而0.5px不被旧安卓WebView支持，viewport缩放又破坏布局；关键要设position: relative、transform-origin: 0 100%、height: 1px及显式background-color。
直接用 ::after 伪元素配合 transform: scaleY(0.5) 是目前最稳、最可控的解法，比硬写 0.5px 或改 viewport 更可靠。
为什么 border: 1px 在手机上看起来像 2px？
在 dpr=2 的设备（如 iPhone 8）上，1 个 CSS 像素对应 2 个物理像素，浏览器不会“降采样”边框，而是把 1px 拉伸成 2 物理像素宽。DPR=3 设备更明显。这不是 bug，是像素映射的自然结果。
常见错误现象：
- 写了
border-bottom: 1px solid #eee，真机上看像一条粗灰线 - 直接写
border: 0.5px，部分安卓 WebView（尤其 Android 4.x 和旧版 UC）不识别，渲染为无边框 - 改
viewport缩放后，字体、间距全乱，需重调所有尺寸
::after + scaleY(0.5) 怎么写才不偏位？
关键不在缩放本身，而在定位基点和父容器约束。缩放默认以中心为轴心，会导致伪元素下移或上浮。
立即学习“前端免费学习笔记（深入）”；
- 父元素必须设
position: relative，否则::after的position: absolute失效 -
transform-origin必须显式设为0 100%（左下角），才能让scaleY(0.5)从底部向上压缩，不破坏对齐 - 伪元素推荐写
height: 1px+scaleY(0.5)，语义清晰；避免用border属性画边框——它受盒模型影响，缩放后内容区可能被挤
示例（底部单边）：
.line-bottom {
position: relative;
}
.line-bottom::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: #ddd;
transform: scaleY(0.5);
transform-origin: 0 100%;
}
四边都想要 1px 边框，scale(0.5) 会压扁内容吗？
不会压扁内容，但若直接给元素加 border: 2px 再缩放，border 仍计入 width/height，导致内容区变窄。正确做法是让伪元素撑开区域再缩放。
- 伪元素设
top: 0; left: 0; right: 0; bottom: 0;，再用transform: scale(0.5)整体缩放 - 必须加
box-sizing: border-box，否则缩放后边框位置飘移 -
transform-origin改为0 0（左上角），确保锚点稳定 - 安卓低版本 WebView 对
scaleY支持弱，四边场景统一用scale(0.5)更稳妥
真正容易被忽略的是：伪元素的 content 必须是非空字符串（哪怕只是 ''），且不能依赖继承颜色——background-color 必须显式指定，无法自动继承父级的 border-color。
