響應式佈局—設備像素密度測試 (-webkit-min-device-pixel-ratio)

 

最近遇到這種頭疼的問題，百思不得其解，不恥下問，懸樑刺股這些事情都作過以後，終於看到但願，因而攢見好就收，感受整理分享給你們，但願有所幫助。

對手機分辨率和網頁像素的初步認識是，是2倍的差異。

可是讓人費解的是爲何還要 1.325 這種數據呢，原來是這麼回事：

舉個栗子：

 

如下是我摘抄並翻譯的，想了解更多原文在尾部有連接哈~

-webkit-min-device-pixel-ratio的常見值對比（是設備上物理像素和設備獨立像素，設備像素比率）

設備 分辨率 設備像素比率Android LDPI 320×240 0.75 Iphone 3 & Android MDPI 320×480 1 Android HDPI 480×800 1.5 Iphone 4 960×640 2.0

 

 

設備像素爲:1.0    (-webkit-min-device-pixel-ratio)

全部non-Retina mac電腦 
蘋果iPhone(第一代) 
蘋果iPhone 3 g 
蘋果iPhone 3 gs 
蘋果iPad(第一代) 
蘋果iPad 2 
蘋果iPad迷你(第一代) 
宏碁Iconia A500 
三星Galaxy Tab 10.1 
三星Galaxy S

 

設備像素爲:1.3    (-webkit-min-device-pixel-ratio) 

 

華碩MemoPad高清7 
谷歌Nexus 7(2012型)

設備像素爲:1.4    (-webkit-min-device-pixel-ratio)

 

諾基亞流光(Lumia)520

 

設備像素爲:1.5    (-webkit-min-device-pixel-ratio)

 

谷歌Nexus S 
HTC慾望 
HTC Desire HD 
HTC難以想象的年代 
HTC速度 
宏達電的感受 
Kindle Fire高清 
三星Galaxy S II 
索尼平板電腦Xperia Z 
索尼Xperia U

 

設備像素爲:2.0    (-webkit-min-device-pixel-ratio)

 

全部mac視網膜顯示器 
蘋果iPhone 4 
蘋果iPhone 4 s 
蘋果iPhone 5 
蘋果iPhone 5度 
蘋果iPhone 5 s 
蘋果iPhone 6 
蘋果iPad(第三代) 
蘋果iPad 4 
蘋果iPad的空氣 
蘋果iPad迷你(2rd代) 
HTC一條X 
谷歌的Galaxy Nexus 
谷歌Nexus 4 
谷歌Nexus 7(2013型) 
谷歌Nexus 10 
摩托羅拉極限摩托 
三星Galaxy S三世 
三星Galaxy注意二世 
索尼Xperia年代 
索尼Xperia T

 

設備像素爲:2.6    (-webkit-min-device-pixel-ratio)

 

諾基亞流光(Lumia)930

設備像素爲:3.0    (-webkit-min-device-pixel-ratio)

HTC(M7) HTC的蝴蝶 華爲榮耀6 蘋果iPhone 6 + LG G2 聯繫5 OnePlus一 相對應的人找到7(X9076) 三星Galaxy S4 三星Galaxy注3 三星Galaxy注4 索尼Xperia Z 小米小米3