移动端1px的适配问题

先看个概念：

window.devicePixelRatio = 物理像素 / dips（独立像素）

window.devicePixelRatio是设备的物理像素和独立像素的比例，可以叫设备像素比。

非视网膜屏幕的iphone上设备像素比是1，而retina屏幕的iphone，一般像素比是2或者3。

大部分的浏览器目前还在运行在设备像素比是1的系统上，当移动到retina类似设备上时候，就会遇到问题。

css pixels：是可以被硬件和软件调节的单位。一般浏览器的设备像素比是1，所以一个css像素就是代表一个物理像素，

1个像素比=物理像素/1pix，移动端的iphone普遍是retina屏幕，设备像素比是2或者3，那么1 pix对应的应该是2或者3个物理像素。

css中设置：width:1px,对应的物理像素是2px，就会显示变粗，手机机型不同，设备像素比不同，显示的物理像素就不同。

iphone5为例子：iphone5的css像素：320px*568px，dpr设备像素比是2，物理像素就是：（320*2px）*（568px*2）,即是640px*1136px。

2 = 640px/320px

2 = 1136px/568px

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<!--width=device-width：宽度为设备宽度-->
<!--initial-scale：缩放比为1-->
<!--user-scalable=no：是否允许用户自定义缩放-->

所以，移动端的1px的适配问题，还是出自retina屏幕的设备像素比不等于1，而是2或者3。导致css的1px显示出来是2px或者3px变粗。那么针对设备像素比不等于1的设备单独进行px的设置是可行的。但是如果1px，写成.5px在IOS7及其以下或者安卓系统都显示0px。这种方法不可行。

建议的方案：

1，viewport结合rem解决像素比：

比如在像素比为2中设置meta标签：

scale = 1/devicePixelRatio,可以把数字换成变量scale，淘宝的移动端适配flexible.js就是这样子的原理。

<meta name="viewport" content="inital-scale=0.5,maxium-scale=0.5,minimum-scale=0.5,user-scalable=no">

在devicePixelRatio=3中设置meta里面的系数为0.3333333333,

2，transform和伪类：before ：after

如果是border：1px，可以利用：before或者：after重新写border，并使用transform的scale缩小一半。transform:scaleY(50%)

结合js代码来判断是否是retina屏幕：

if(window.devicePixelRatio && devicePixelRatio >= 2){
  //给div重新绑定样式
}

总结：移动端的1px变粗是因为retina屏幕的设备像素比不为1，导致实际显示可能是2px或者3px，可以改变meta标签里的scale系数，scale = 1/devicePixelRatio。一般是0.5或者0.333333，或者使用：before和：after结合transform的scale属性进行缩放。

【完】