移動(dòng)端渲染1px邊框，在安卓設(shè)備上ok，沒問題，但是到了ios設(shè)備上，渲染的會(huì)是2px，甚至是3px?？墒敲髅鲗懙?px啊，渲染的為什么不對(duì)?。拷酉聛砹私庖幌虏坏貌徽f的DPR（Device Pixel Ratio）。
ios設(shè)備使用的是Retina屏，而Retina屏的分辨率是普通屏幕的2倍。所以1px的邊框顯示的是2px。
DPR：設(shè)備物理像素和設(shè)備獨(dú)立像素的比值。
獲取DPR的方式：
在js中，可以用window.devicePixelRatio獲取當(dāng)前設(shè)備的dpr。
在css中，可通過-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio進(jìn)行媒體查詢，對(duì)不同dpr的設(shè)備，做一些樣式適配。
例如：
.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}}
還可以用偽類解決，構(gòu)建一個(gè)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設(shè)備，安卓設(shè)備不可以。
