移動(dòng)端渲染1px邊框包颁，在安卓設(shè)備上ok瞻想，沒問題，但是到了ios設(shè)備上娩嚼，渲染的會(huì)是2px蘑险，甚至是3px≡牢颍可是明明寫的1px啊佃迄，渲染的為什么不對(duì)啊贵少？接下來了解一下不得不說的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è)備不可以。
