移动端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属性进行缩放。

【完】