移动端1px解决方案

理论知识：

1、以iphone6为例，375px宽。也就是说，假如你写一个div的css的width为375px，他就会撑满屏幕；

2、DPR：以iphone6为例，DPR为2。也即是说，他实际是在用4个像素（2x2）在显示你在css中写的1px像素点；

3、也就是说，iphone6虽然是375px宽，但是他实际x轴的像素点是750（375px * 2DPR）；

4、那么假如你需要显示1px宽的线条，只需要写0.5px宽就行了（2个像素宽显示1px的css宽，那么1个像素显示0.5px的css宽）；

5、理论上以上就解决了1px问题，但是等等，假如DPR为1或者3呢？总不可能对不同DPR的浏览器写不同的css样式吧；

6、那么initial-scale（缩放）就来解决这个问题了。initial-scale=1表示维持初始状态不变（但不写跟=1的效果是不同的）；

7、initial-scale=0.5表示屏幕缩放到原来的50%宽和高，也就是说，原来屏幕可以显示375px的宽，现在可以显示750px的宽度了；

8、相当于0.5 * 2（这里的2是DPR的值）个屏幕像素，来表示1个CSS像素；

9、那么假如我css里写1px，并且想让屏幕用1px像素（也就是说，iphone6的375px像素里有750个像素点，我这里只想让他用1个像素点）来显示；

10、那么设置initial-scale = ( 1 / 屏幕的DPR值 ) 就可以了；

具体代码如下：

function resolve1px () {
  try {
    var dpr = window.devicePixelRatio
    if (!dpr) {
      return
    }
    var scale = 1 / dpr
    document.querySelector(`meta[name='viewport']`).setAttribute('content', `width=device-width， initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no`)
  } catch (err) {
    console.log('当前机型不支持1px解决方案')
  }
}

vw和rem：

1、vw是相对屏幕，所以本解决方案对于vw和vh不影响；

2、而rem如果取值时是相对于clientWidth来取值的话，也不影响，如果是针对其他的，那么可能会有影响（应该不会针对其他的吧）；

3、rem的设置代码，应写于这里的代码之后，因为这里的代码会影响clientWidth的数值；