解决移动端1px Border

今天聊聊解决移动端1px border的问题，当我们进行移动端开发需要实现1px的border是，可能会写下如下代码：

border-bottom:1px solid black;

写完一看，border实现，但仔细看会发现，这怎么成了2px，what happened？ 其实，这时移动设备的DPR导致的

何为DPR

DPR，Device-Pixel-Retio，设备像素比，就是设备物理像素与视觉像素的比值，比如一台手机设备物理像素为2560px，浏览器宽度是1280px，那么DRP就是2，可以在控制台打印window.devicePixelRatio查看，移动端DPR=2，所以实际是2px的border，这里提供两种解决方法

viewport

head标签加上一行代码

<meta name='viewport' content='width=device-width,initial-scale=0.5'>

通过手动设置页面缩放比例为0.5,2px的border就会自动变成1px，该方案十分方便，一行代码即可解决麻烦，缺点是对老项目来说需要大量修改已有布局的尺寸

伪元素+transform

原理是利用:before or :after来重做border,通过transform实现缩放

 .content{
     positon:relative;
     border:none;
 }
 .content:after{
     content:'';
     position:absolute;
     width:100%;
     height:1px;
     bottom:0;
     background:black;
     transform:scaleY(0.5);
 }