先说结论：直接使用 border: 0.5px 实现移动端1px边框在大多数场景下并不可靠——安卓系统全系列均不支持，iOS 13 以下版本同样无法稳定渲染，切勿将兼容性押注在此方案上。
那么移动端1px细线究竟如何实现？当前最稳定、经得起多设备考验的解决方案，依然是 transform: scale() 缩放法。
为什么 transform: scale() 是当前最稳的选择
这一方案的精妙之处在于，它完全不依赖浏览器对小数像素 px 的解析能力。其核心原理是利用高 DPR 屏幕的物理像素对齐机制：先创建一个 2px 宽的伪元素边框，再通过 scale(0.5) 将其压缩至 1 物理像素的宽度。关键不在于“视觉上看起来更细”，而是确保边框精准落在单个物理像素边界上，彻底消除虚边与模糊现象。
不过，实施过程中有几个关键细节必须严格把控：
transform-origin: 0 0必须显式设置，否则缩放后元素位置会发生偏移，导致边框错位甚至消失- 父元素务必添加
position: relative，否则::after伪元素将相对于 body 定位，布局将完全失控 - 若只需单侧边框（如下划线），使用
scaleY(0.5)更为稳妥，可避免干扰整体布局；四边均匀缩放则用scale(0.5)，但必须配合box-sizing: border-box防止溢出 - 缩放后的伪元素仍可能拦截点击事件，务必添加
pointer-events: none，确保下层交互不受影响
如何适配不同 dpr 值（2、3、4）
如果直接写死 scale(0.5)，那么仅对 dpr=2 的设备有效。当遇到 dpr=3 的屏幕时，需要缩小至 scale(0.333)，否则边框要么发虚，要么直接消失。在纯 CSS 方案中，使用媒体查询进行兜底是最实用的做法：
/* dpr=2 */@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.hairline::after { transform: scale(0.5); }
}
/* dpr=3 */
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
.hairline::after { transform: scale(0.333); }
}
以下几点需要特别留意：
- 不要遗漏
min-resolution属性，它在安卓 WebView 中的兼容性优于-webkit-min-device-pixel-ratio - 如果项目中已通过 JS 获取
window.devicePixelRatio，建议动态为根元素添加 class（例如data-dpr="3"），再通过属性选择器控制缩放比，这种方式比媒体查询更精确 scale(0.333)不能写成scale(1/3)，CSS 不会解析数学表达式，必须直接使用小数值
伪元素边框常见踩坑点
代码看似简洁，但线上环境出现问题的根源往往不是语法错误，而是盒模型与定位层面的细节疏忽：
- 未设置
box-sizing: border-box→ 四边伪元素缩放后会超出父容器边界，左右或上下出现半像素黑线，视觉效果明显粗糙 - 父容器包含
overflow: hidden→ 缩放基于原始尺寸计算，scale(0.5)后伪元素坐标系变小，但绝对定位仍按原宽高占位，极易被裁剪 - 绘制单边时使用了
border: 1px solid而非background-color→ 边框宽度会参与盒模型计算，导致整体布局偏移 - 文字容器自身添加了
transform: scale()→ 字体随之缩小，必须确保缩放仅作用于伪元素
真正考验开发能力的，从来不是写出第一版代码，而是针对每个使用场景逐一确认：当前设备的 dpr 值是多少、父容器有哪些样式配置、是否涉及圆角、是否存在 overflow 裁剪——这些细节但凡遗漏一个，1px 边框就会出现断裂、偏移、发虚等问题，而且这类缺陷往往难以稳定复现。