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个变为多个

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 的值来加载不同尺寸的图片

针对普通显示屏(devicePixelRatio = 1.0、1.3)，加载一张1倍的图片
针对高清显示屏(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简单介绍

高清显示屏原理及设计方案

原文链接：/html/994341.html