-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