移動端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屬性進行縮放。

【完】