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

世有因果知因求果發表於2015-04-01
WebKitdev

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 

相關文章