移动端边框1px问题

原理

1. 设备像素比（DPR）：

   • 物理像素（Physical Pixel）：屏幕的实际像素点。
   • 逻辑像素（CSS Pixel）：CSS 中使用的抽象像素单位。
   • DPR = 物理像素 / 逻辑像素。例如，DPR=2 表示 1 个 CSS 像素对应 2x2 的物理像素。

2. 问题的根源：

   • 当 DPR > 1（如 Retina 屏），CSS 的 1px 会被映射到多个物理像素，导致实际渲染的线条变粗。
   • 例如，DPR=2 时，border: 1px solid black; 会被渲染为 2x2 的物理像素，视觉上更粗。

---

解决方案

以下是 5 种常用方法，根据场景选择最合适的方案：

---

方案 1：使用 transform: scale() 缩放

通过伪元素绘制边框，再利用 transform 缩放线条高度，模拟更细的边框。

.border-1px {
  position: relative;
}
.border-1px::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px; /* 逻辑 1px */
  background: #333;
  transform: scaleY(0.5); /* 缩放为物理 0.5px */
  transform-origin: 0 0;
}

优点：兼容性好，灵活控制各方向边框。
缺点：需要编写额外 CSS，可能影响子元素布局。

---

方案 2：媒体查询 + min-device-pixel-ratio

针对不同 DPR 设备，使用媒体查询动态调整缩放比例。

/* 默认样式 */
.border {
  border: 1px solid #333;
}

/* DPR >= 2 的设备 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .border {
    position: relative;
    border: none;
  }
  .border::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    height: 200%;
    border: 1px solid #333;
    transform: scale(0.5);
    transform-origin: 0 0;
    pointer-events: none; /* 避免伪元素阻挡点击事件 */
  }
}

/* DPR >= 3 的设备 */
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  .border::after {
    transform: scale(0.333);
  }
}

优点：精确适配不同 DPR 设备。
缺点：代码量较多，维护成本略高。

---

方案 3：动态修改 Viewport 缩放

通过 JavaScript 动态调整 <meta viewport> 的缩放比例，使 CSS 像素与物理像素 1:1 对应。

<!-- HTML 中设置 viewport -->
<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<script>
  const dpr = window.devicePixelRatio || 1;
  const scale = 1 / dpr;
  const meta = document.getElementById('viewport');
  meta.content = `width=device-width, initial-scale=${scale}, maximum-scale=${scale}, user-scalable=no`;
</script>

优点：全局生效，无需额外 CSS。
缺点：缩放会影响页面布局（如字体大小），需配合 rem 或 vw 单位使用。

---

方案 4：使用 border-image

通过图片或渐变生成细边框。

.border-image-1px {
  border-width: 1px 0;
  border-image: linear-gradient(to bottom, #333 50%, transparent 50%) 2 0 stretch;
}

优点：简单直接。
缺点：无法灵活控制圆角，图片可能模糊。

---

方案 5：使用 box-shadow 模拟边框

利用阴影的扩散效果模拟细线。

.box-shadow-1px {
  box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.5);
}

优点：代码简洁。
缺点：颜色和效果可能不够真实。

---

如何选择方案？

方案	适用场景	注意事项
transform: scale	需要精确控制边框方向	避免伪元素覆盖子元素
媒体查询	适配不同 DPR 设备	代码维护成本较高
动态 Viewport	全局统一解决	需配合响应式单位（如 rem）
border-image	简单单色边框	不支持圆角
box-shadow	快速实现细线	颜色和效果可能不理想

---

总结

1. 优先推荐：transform: scale() + 媒体查询，兼顾兼容性和灵活性。
2. 全局适配：动态 Viewport 缩放 + rem/vw 单位，适合复杂项目。
3. 快速实现：box-shadow 或 border-image，适用于简单场景。

理解设备像素比和渲染机制后，选择最适合业务场景的解决方案即可。