web移動端，需要清楚設備像素比devicePixelRatio的應用

我們這裡所說的devicePixelRatio其實指的是window.devicePixelRatio, 被所有WebKit瀏覽器以及Opera所支持。

概念

devicePixelRatio ，它是設備上物理像素和設備獨立像素( device-independent pixels (dips) )的比例，即 devicePixelRatio = 屏幕物理像素/設備獨立像素 

例如iPhone4S，解析度為：960×640，取屏幕寬度計算，物理像素640px，設備獨立像素320px，那麼，devicePixelRatio 值為 640px / 320px = 2，又如iPhone3，計算出來的 devicePixelRatio 值為 320px / 320px = 1

要瞭解其他手機型號的物理像素，獨立像素，設備像素比，請查看http://screensiz.es/phone

在手機上我們一般的圖片在高清顯示屏下會很模糊，那麼什麼是高清顯示屏呢？

高清顯示屏起源於 retina ，打開維基百科，搜索 Retina顯示屏 ，它是一種由蘋果公司設計和委托製造的顯示屏，具備足夠高像素密度而使得人體肉眼無法分辨其中單獨像素點的液晶屏。

高清顯示屏原理如下：

1. 一種具備超高像素密度的液晶屏

2. 同樣大小的屏幕上顯示的像素點由1個變為多個

retina顯示屏 只是高清顯示屏的一種。

現在知道高清顯示屏了，那麼來分析下一般圖片在其設備上會模糊的原因，假如現在有一張圖片，有兩部手機，一部是普通顯示屏，一部是高清顯示屏，在同樣大小的屏幕上，高清顯示屏中的點陣圖會被放大，圖片會變得模糊。

常見高清顯示屏中點陣圖被放大的比例

我們可以瞭解到 retina顯示屏 中圖片被放大的倍數高達 2:1，而其實各種高清顯示屏放大的倍數是不同的，有 1.3:1、1.5:1、2:1、3:1 ，目前最多的是 2:1，而 HTC Butterfly、Nexus 5、Samsung Galaxy S4、 Sony Xperia Z  這個幾個系列的移動設備，圖片被放大的倍數高達 3:1

區分普通顯示屏和高清屏

通過 devicePixelRatio的值，就可以區分普通顯示屏和高清屏，當devicePixelRatio值等於1時（也就是最小值），那麼它普通顯示屏，當devicePixelRatio值大於1(通常是1.5、2.0)，那麼它就是高清顯示屏。

移動端如何調用高清背景圖

為了更好的提升用戶體驗，節省移動端的流量，針對不同的顯示屏，我們可以採取不用的方案，保證圖片在不同顯示屏幕下正常展現，這個方法跟設計原生APP中針對不同解析度採用使用不同圖片的原理相似~

通過判斷 devicePixelRatio 的值來載入不同尺寸的圖片

1. 針對普通顯示屏(devicePixelRatio = 1.0、1.3)，載入一張1倍的圖片
2. 針對高清顯示屏(devicePixelRatio >= 1.5、2.0、3.0)，載入一張2倍大的圖片

由於3.0的手機目前比較少，3.0也載入一張2倍的圖片是可以接受的。那麼，通過上面的方案，我們不是需要設計2套圖片，甚至是3套圖片呢？

具體還是要看產品需求的用戶群、維護成本、產品急需上線等來設計方案，例如用戶群大都是高端手機來的，全部都採用載入一張2倍的圖片也是可以接受的~

本文建議採用載入2套圖片~

Media Queries 調用高清背景圖

利用媒體查詢結合 devicePixelRatio 可以區分普通顯示屏和高清顯示屏，並給出瞭如下CSS設計方案：

.css{/* 普通顯示屏(設備像素比例小於等於1.3)使用1倍的圖 */ 
    background-image: url(img_1x.png);
}
@media only screen and (-webkit-min-device-pixel-ratio:1.5){
.css{/* 高清顯示屏(設備像素比例大於等於1.5)使用2倍圖  */
    background-image: url(img_2x.png);
  }
}

 image-set 調用retina背景圖

image-set，它是Webkit的私有屬性，也是Css4的一個屬性，目前有一些網站已經使用到它了，大家可以看下W3C的說明 http://dev.w3.org/csswg/css-images/#image-set-notation，它是為瞭解決Retina屏幕下的圖像顯示而生，據我測試，目前支持蘋果的 retina 顯示屏和部分android 顯示屏，也就是說它的相容性還是挺一般的~

.css{
    background: url(../img/bank_ico.png) no-repeat;/* 不支持image-set的顯示屏 */ 
    background: -webkit-image-set(
                url(../img/bank_ico.png) 1x,/* 支持image-set的瀏覽器的[普通屏幕]下 */
                url(../img/bank_ico_retina.png) 2x);/* 支持image-set的瀏覽器的[Retina屏幕] */
                
}

參考地址：

設備像素比devicePixelRatio簡單介紹

高清顯示屏原理及設計方案