移动端渲染1px边框

移动端渲染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设备，安卓设备不可以。