这是一个在移动端 Web 开发中非常经典且高频的面试题/实战问题。以下是关于“移动端 1px 边框问题”的成因分析及主流解决方案。

一、 问题的成因

简单来说，是因为 CSS 中的 1px 并不等于设备屏幕上的 1 物理像素。

1. 核心概念：DPR (Device Pixel Ratio)

• 物理像素 (Physical Pixel)：屏幕上实际发光的物理点，是显示器显示的最小单位。
• 逻辑像素 (Logical Pixel / CSS Pixel)：CSS 中使用的 px 单位。
• 设备像素比 (DPR)：DPR = 物理像素 / 逻辑像素。

2. 现象解释

在早期的普通屏幕（标准屏）上，DPR = 1，此时 1 CSS像素 = 1 物理像素，显示没有问题。

但在 Retina 屏（高清屏） 上，DPR 通常为 2 或 3。

• DPR = 2 时：1 CSS像素 = 2 x 2 物理像素。
• 这意味着，当你设置 border: 1px 时，手机实际上用了 2个物理像素 的宽度来渲染这条线。

结果：设计师想要的是 1 物理像素的细线（Hairline），但前端写了 1px 后，屏幕上显示的是 2 物理像素（甚至 3 物理像素）的线。所以在视觉上，边框看起来变粗了，不够精致。

二、 常见的解决方案

目前业界主要有以下几种解决方案，按推荐程度排序：

1. 伪类 + transform: scale (最推荐，兼容性最好)

这是目前最主流的方案。原理是把伪元素的长宽设为原来的 2 倍（或 3 倍），设置 1px 边框，然后通过 transform: scale(0.5) 缩小一半。

优点：兼容性好，支持圆角（border-radius），全边框和单边框都能实现。
缺点：占用伪元素，代码量稍多。

代码示例（四条边框）：

.border-1px {
  position: relative;
}

.border-1px::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  /* 宽高设为 200% */
  width: 200%;
  height: 200%;
  border: 1px solid #000;
  /* 关键：缩小 0.5 倍 */
  transform: scale(0.5);
  /* 关键：定位于左上角 */
  transform-origin: 0 0;
  /* 如果有圆角，这里也要放大 2 倍 */
  border-radius: 8px; 
  box-sizing: border-box;
  pointer-events: none; /* 防止遮挡点击 */
}

注：针对 DPR=3 的设备，可以设置宽高 300% 并 scale(0.333)。通常 scale(0.5) 已经能满足绝大多数视觉需求。

2. 直接设置 border: 0.5px (最简单，未来趋势)

原理：直接告诉浏览器渲染 0.5px 的逻辑像素，在 DPR=2 的屏幕上正好对应 1 物理像素。

优点：代码最少，逻辑最自然。
缺点：兼容性问题。

• iOS 8+ 支持良好。
• 安卓设备碎片化严重，部分老旧或低端安卓机无法识别 0.5px，会把它当作 0px（也就是边框消失）。

解决方案：可以通过 JavaScript 检测是否支持 0.5px，或者通过 CSS Hack 区分系统。

.border-1px {
  border: 1px solid #000;
}

/* 针对高分屏且支持 0.5px 的环境 */
@media (-webkit-min-device-pixel-ratio: 2) {
  .border-1px {
    border: 0.5px solid #000;
  }
}

3. viewport + rem 缩放 (早期大厂方案，如淘宝 Flexible)

原理：在 <meta name="viewport"> 中，将 initial-scale 设置为 1 / DPR。
例如在 DPR=2 的设备上，将页面整体缩小 0.5 倍。这样 CSS 里的 1px 就自然变成了物理上的 1px。

优点：一劳永逸，全站所有 1px 都是真的 1 物理像素。
缺点：

• 副作用极大：整个页面的布局（宽高、字体大小）都需要按照缩放比例重新计算（通常配合 rem 使用）。
• 老旧方案：随着 vw/vh 的普及和浏览器对 0.5px 支持的提升，这种“暴力缩放视口”的方案已不再推荐（淘宝官方也已弃用 lib-flexible）。

4. 背景渐变 (Background Gradient)

原理：使用 linear-gradient 绘制背景，利用渐变的一半有颜色、一半透明，来模拟 1px 线条。

优点：实现单条线（如列表分割线）非常方便。
缺点：

• 无法实现圆角。
• 代码比较繁琐，修改颜色不便。
• 难以实现四条边的完整边框。

代码示例（底部 1px 线）：

.border-bottom-1px {
  background-image: linear-gradient(180deg, black 50%, transparent 50%);
  background-size: 100% 1px; /* 宽度100%，高度1px */
  background-repeat: no-repeat;
  background-position: bottom;
}

5. Box-shadow 模拟

原理：利用 CSS 阴影效果模拟边框。

.border-shadow {
  box-shadow: 0 0 0 0.5px #000;
}

缺点：

• 渲染效果往往不如 border 清晰（可能会有虚边）。
• 兼容性也存在细微差异。
• 通常不作为首选。

6. SVG 边框 (border-image)

原理：使用一张 1px 宽度的 SVG 图片作为 border-image。

优点：矢量图，非常清晰。
缺点：

• 需要制作 SVG 图片（或 base64）。
• 修改颜色不灵活。
• 圆角处理极其麻烦。

三、 总结与建议

最佳实践：
在现代开发中，建议封装一个 CSS 类（如 .hairline）或 Sass/Less Mixin，内部使用 伪类 + transform 的方式来实现，这样既保证了兼容性，又支持圆角。