如何用CSS解决移动端适配1px细线问题？

结论：直接使用 border: 0.5px 大概率无法生效——安卓系统全系不支持，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 细线就会出现断开、偏移、发虚等问题，且这类问题往往难以复现。