移动端1px渲染问题的解决方案

17 min read

在移动端1px渲染成2px的问题是由于高清屏幕像素密度的问题导致的。可以通过下列方法解决：

  1. 使用viewport的meta标签将页面缩小到1:1比例：
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  1. 使用CSS中的scale缩小元素：
.elem {
  transform: scale(0.5);
  transform-origin: left top;
}

这种方法适用于不需要点击的元素，因为缩放后点击区域会变小。

  1. 使用伪元素模仿边框：
.elem:before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border: 1px solid #000;
}

这种方法适用于需要边框的元素，但是会增加页面的DOM结构。

  1. 使用伪元素加transform缩放模拟1px：
.elem:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  border: 1px solid #000;
  transform: scale(0.5);
  transform-origin: left top;
}

这种方法适用于需要边框的元素，而且对DOM结构没有影响。

通常情况下，使用第一种方法是最简单有效的。