-webkit-min-device-pixel-ratio: 2是什麼意思？

DPI（DPR） stands for Dots Per Inch which technically means printer dots per inch。

這個參數實際上量化了屏幕的物理分辨率和顯示清晰度，好比iphone的DPR就是2，比通常的手機都要高。

一樣的圖片在不一樣手機上顯示的效果就有很大不一樣，特別是對於apple設備，因爲其DPR比較高，所以通常必須對其

應用分辨率高的圖片顯示效果才能獲得保證。

常見的，能夠使用media query來應用不一樣的style

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}

 對於如何實如今蘋果高分辨率手機上去應用高分辨率的圖片，有一個叫作retina.js的js代碼，能夠實現相應功能，爲了方便使用，

設置有相應的less/sass mixin以便方便開發者使用

下面是常見手機型號的參數值：

• -webkit-min-device-pixel-ratio爲1.0

1. 全部非Retina的Mac
2. 全部非Retina的iOS設備
3. Acer Iconia A500 
4. Samsung Galaxy Tab 10.1
5. Samsung Galaxy S 

 

• -webkit-min-device-pixel-ratio爲1.3

1. Google Nexus 7

 

• -webkit-min-device-pixel-ratio爲1.5

1. Google Nexus S 
2. Samsung Galaxy S II 
3. HTC Desire
4. HTC Desire HD
5. HTC Incredible S 
6. HTC Velocity
7. HTC Sensation 

 

• -webkit-min-device-pixel-ratio爲2.0

1. iPhone 4
2. iPhone 4S
3. iPhone 5
4. iPad (3rd generation)
5. iPad 4
6. 全部Retina displays 的MAC
7. Google Galaxy Nexus
8. Google Nexus 4
9. Google Nexus 10
10. Samsung Galaxy S III
11. Samsung Galaxy Note II
12. Sony Xperia S
13. HTC One X