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.5:一、2:一、3:1 ，目前最多的是 2:1，而 HTC Butterfly、Nexus 五、Samsung Galaxy S四、 Sony Xperia Z  這個幾個系列的移動設備，圖片被放大的倍數高達 3:1

區分普通顯示屏和高清屏

經過 devicePixelRatio的值，就能夠區分普通顯示屏和高清屏，當devicePixelRatio值等於1時（也就是最小值），那麼它普通顯示屏，當devicePixelRatio值大於1(一般是1.五、2.0)，那麼它就是高清顯示屏。

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

爲了更好的提高用戶體驗，節省移動端的流量，針對不一樣的顯示屏，咱們能夠採起不用的方案，保證圖片在不一樣顯示屏幕下正常展示，這個方法跟設計原生APP中針對不一樣分辨率採用使用不一樣圖片的原理類似~

經過判斷 devicePixelRatio 的值來加載不一樣尺寸的圖片

1. 針對普通顯示屏(devicePixelRatio = 1.0、1.3)，加載一張1倍的圖片
2. 針對高清顯示屏(devicePixelRatio >= 1.五、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簡單介紹

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