移动端 1px 解决方案(完整版)

前言

在移动端web开发中，UI设计稿中设置边框为1像素，前端在开发过程中如果出现border:1px，测试会发现在retina屏机型中，1px会比较粗，即是较经典的移动端1px像素问题。

产生原因

• 设备像素比：dpr=window.devicePixelRatio，也就是设备的物理像素与逻辑像素的比值。
• 在retina屏的手机上, dpr为2或3，css里写的1px宽度映射到物理像素上就有2px或3px宽度。
• 例如：iPhone6的dpr为2，物理像素是750（x轴）,它的逻辑像素为375。也就是说，1个逻辑像素，在x轴和y轴方向，需要2个物理像素来显示，即：dpr=2时，表示1个CSS像素由4个物理像素点组成，如下图所示：

解决方案

1. 0.5px 方案

在IOS8+，苹果系列都已经支持0.5px了，可以借助媒体查询来处理。

/* 这是css方式*/
.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 }
}

IOS7及以下和Android等其他系统里，0.5px将会被显示为0px。那么我们就需要想出办法解决，说实在一点就是找到Hack。

解决方案是通过JavaScript检测浏览器能否处理0.5px的边框，如果可以，给html标签元素添加个class。

if (window.devicePixelRatio && devicePixelRatio >= 2) {
   
  var testElem = document.createElement('div');
  testElem.style.border = '.5px solid transparent';
  document.body.appendChild(testElem);
}
if (testElem.offsetHeight == 1) {
   
  document.querySelector('html').classList.add('hairlines');
}
  document.body.removeChild(testElem);
}
// 脚本应该放在body内，如果在里面运行，需要包装 $(document).ready(function() {})

然后，极细的边框样式就容易了：

div {
   
  border: 1px solid #bbb;
}
.hairlines div {
   
  border-width: 0.5px;  
}

优点：简单，不需要过多代码。
缺点：无法兼容安卓设备、 iOS 7及以下设备。

2. 伪类+transform

原理：把原先元素的border去掉，然后利用:before或者:after重做border，并 transform的scale缩小一半，原先的元素相对定位，新做的border绝对定位。

/*手机端实现真正的一像素边框*/
.border-1px, .border-bottom-1px, .border-top-1px, .border-left-1px, .border-right-1px {
   
    position: relative;
}

/*线条颜色 黑色*/
.border-1px::after, .border-bottom-1px::after, .border-top-1px::after, .border-left-1px::after, .border-right-1px::after {
   
    background-color: #000;
}