移动端渲染1px边框，在安卓设备上ok，没问题，但是到了ios设备上，渲染的会是2px，甚至是3px。可是明明写的1px啊，渲染的为什么不对啊？接下来了解一下不得不说的DPR（Device Pixel Ratio）。
ios设备使用的是Retina屏，而Retina屏的分辨率是普通屏幕的2倍。所以1px的边框显示的是2px。
DPR：设备物理像素和设备独立像素的比值。
获取DPR的方式：
在js中，可以用window.devicePixelRatio获取当前设备的dpr。
在css中，可通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询，对不同dpr的设备，做一些样式适配。
例如：
.border{border:1px solid #999}
@media screen and (-webkit-min-device-pixel-ratio: 2){.border { border:0.5px solid #999}}
@media screen and (-webkit-min-device-pixel-ratio: 3){.border { border:0.333333px solid #999}}
还可以用伪类解决，构建一个1px的伪元素，将它的宽高放大到2倍，边框是1px，然后再缩放到0.5；如下：
.radius-border{position: relative;}
@media screen and (-webkit-min-device-pixel-ratio: 2){
.radius-border:before{
content: "";
box-sizing: border-box;
position: absolute;
width: 200%;
height: 200%;
left: 0;
top: 0;
border:1px solid #999;
-webkit-transform(scale(0.5));
-webkit-transform-origin: 0 0;
transform(scale(0.5));
transform-origin: 0 0;
}
}
或者使用淘宝提供的flexible.js，但适用于ios设备，安卓设备不可以。
