移动端1px边框发虚变粗的根本原因是设备像素比（dpr）导致CSS 1px被渲染为多个物理像素，浏览器插值拉伸后模糊；解决方案是用伪元素配合transform: scale(1/dpr)缩放边框至1物理像素，并设transform-origin和pointer-events: none规避副作用。
为什么移动端1px边框看起来发虚、变粗
根本原因是设备像素比（dpr）导致的。比如 iPhone 6/7/8 的 dpr=2，CSS 中写的 1px 实际被渲染成物理 2 像素宽，浏览器插值拉伸后就糊了；安卓部分机型甚至 dpr=3，问题更明显。
直接写 border: 0.5px solid #ccc 没用——绝大多数浏览器不支持非整数 px 边框宽度（iOS Safari 直到 13+ 才有限支持，且不稳定）。
transform: scale(0.5) 是怎么把边框“压”回1物理像素的
核心思路是：先让元素放大 2 倍（比如把 1px 变成视觉上 2px），再用 transform: scale(0.5) 整体缩放回去。缩放时，边框也被等比压缩，最终在高 DPR 屏幕上精准落在 1 个物理像素上。
但要注意缩放会影响整个元素，包括文字、内边距、子元素——所以必须配合 transform-origin 和容器隔离来控制影响范围：
立即学习“前端免费学习笔记（深入）”；
- 只对伪元素（
::before或::after）做缩放，避免干扰内容 - 设
transform-origin: 0 0，确保从左上角缩放，不偏移位置 - 父容器需设
position: relative，伪元素用position: absolute定位 - 缩放后的元素可能模糊？加
will-change: transform或-webkit-backface-visibility: hidden提升到 GPU 图层
实际写法和常见翻车点
最稳妥的是用伪元素画边框，而不是直接缩放整个盒子：
div {
position: relative;
}
div::after {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid #ddd;
transform: scale(0.5);
transform-origin: 0 0;
pointer-events: none;
}
容易踩的坑：
-
transform: scale(0.5)后，1px 边框变成 0.5 CSS 像素，但在 dpr=2 下正好 = 1 物理像素；如果忘了根据dpr动态调整缩放比例（比如 dpr=3 应该用scale(0.33)），效果就失效 - 没设
pointer-events: none，伪元素会挡住点击事件 - 父容器有
overflow: hidden，缩放后伪元素可能被裁掉（因为缩放基于原尺寸，scale(0.5) 后坐标系变小，但绝对定位仍按原始盒模型计算） - 字体跟着缩放变小——所以坚决不能对文字容器本身用
scale，只作用于边框载体
要不要用 JS 动态适配不同 dpr
纯 CSS 方案（如 border-image 或 box-shadow 模拟）兼容性差、控制粒度粗；而硬编码 scale(0.5) 只适用于 dpr=2 设备，在 dpr=3 的华为/三星机上会变细甚至消失。
真要兼顾，得用 JS 读取 window.devicePixelRatio，动态写样式：
- 在
<head>里注入 style 标签，生成对应.hairline-top { transform: scale(${1/dpr}) } - 或者用 postcss 插件（如
postcss-pxtorem配合媒体查询）预编译多套规则 - 注意：服务端无法获取 dpr，这类逻辑必须前端运行
多数项目其实 dpr=2 占比超 80%，先保主要场景，dpr=3 用 border: 1px 回退也比错位强——毕竟「模糊」比「稍粗」更难被用户感知。
