Web解决移动端1px像素问题

Web解决移动端1px像素问题

在移动端，如果仅仅使用 css 的 1px 来设置 border ，那可能会出现比较粗的情况。因为，有些手机屏幕的 DPR = 2 （2倍图），即 1px 它会用两个物理像素来显示，就粗了。

1.Css解决

• 优点：简单

• 缺点：不兼容安卓设备、IOS7以下设备

/*使用媒体查询方式*/
.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border { border: 0.5px solid #999 }
}
/*ios dpr=2和dpr=3情况下border相差无几，下面代码可以省略*/
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .border { border: 0.333333px solid #999 }
}

2.设置html中的meta标签

• 优点：几乎满足所有场景并兼容布局

• 缺点：不适用于年代太久远的项目

<!-- 
  width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，
  如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
  height：和 width 相对应，指定高度。
  initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
  maximum-scale：允许用户缩放到的最大比例。
  minimum-scale：允许用户缩放到的最小比例。
  user-scalable：用户是否可以手动缩放。
-->


<!-- 在devicePixelRatio=2 时 -->
<meta name="viewport" content="width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
<!-- 在devicePixelRatio=3 时 -->
<meta name="viewport" content="width=device-width,initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">