移动端1像素边框问题

这几天忙着做一个手机端的web页面，然后要嵌入到APP之中，UI设计师看我做的页面发现一个问题，就是边框线不止1像素，跟他设计的不符，我很纳闷明明就是写的时候是1px为啥显示出来就不一样呢？

其实这个原因很简单，因为css中的1px并不等于移动设备的1px，这些由于不同的手机有不同的像素密度。在window对象中有一个devicePixelRatio属性，他可以反应css中的像素与设备的像素比，在devicePixelRatio = 2 的手机浏览器中1px可能显示的是2像素的线，同理devicePixelRatio =3 的手机浏览器中1px可能显示的是3像素的线。

然后发现网上的解决方案还是挺多的，但是比较全面解决问题有2种

1、viewport + rem 实现

关于REM布局，可以参考文章《移动端H5页面之iphone6的适配》

优点：
所有场景都能满足
一套代码，可以兼容基本所有布局
缺点：
老项目修改代价过大，只适用于新项目
嵌入webview中去，页面样式会乱套（在浏览器中显示正常），可能我写法有问题，需要重新考量

        <script>  
          
            var viewport = document.querySelector("meta[name=viewport]");  
            //下面是根据设备像素设置viewport  
            if (window.devicePixelRatio == 1) {  
                viewport.setAttribute('content', 'width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no');  
            }  
            if (window.devicePixelRatio == 2) {  
                viewport.setAttribute('content', 'width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no');  
            }  
            if (window.devicePixelRatio == 3) {  
                viewport.setAttribute('content', 'width=device-width,initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no');  
            }  
            var docEl = document.documentElement;  
            var fontsize = 10 * (docEl.clientWidth / 320) + 'px';  
            docEl.style.fontSize = fontsize;  
              
        </script> 

2、 伪类 + transform 实现

对于老项目，有没有什么办法能兼容1px的尴尬问题了，个人认为伪类+transform是比较完美的方法了。
原理是把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border ，并 transform 的 scale 缩小一半，原先的元素相对定位，新做的 border 绝对定位。

优点：

所有场景都能满足

支持圆角(伪类和本体类都需要加border-radius)

缺点：

对于已经使用伪类的元素(例如clearfix)，可能需要多层嵌套

单条border样式设置：

.scale-1px{
  position: relative;
  border:none;
}
.scale-1px:after{
  content: '';
  position: absolute;
  bottom: 0;
  background: #000;
  width: 100%;
  height: 1px;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

四条boder样式设置:

.scale-1px{
  position: relative;
  margin-bottom: 20px;
  border:none;
}
.scale-1px:after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #000;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 200%;
  height: 200%;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: left top;
  transform-origin: left top;
}

其他，如 使用border-image实现、 使用background-image实现、 多背景渐变实现、 使用box-shadow模拟边框就不一一赘述啦