移动端页面动态加载 2X & 3X 图片

 开发背景  

1. 开发移动端H5页面
2. 面对不同分辨率的手机

为什么要用不同倍率下的图片  ？

有时候我们会发现，当我们在适某一机型的时候，显示上没什么问题。但是一旦我换到另外一部手机，发现出现了模糊的情况，尤其以图片更为显著，这只是表象，究其原因是  设备像素比，

可以先看几个概念 ：

在进行具体的分析之前，首先得知道下面这些关键性基本概念(术语)。

物理像素(physical pixel)

一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。

设备独立像素(density-independent pixel)

设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，然后由相关系统转换为物理像素。

所以说，物理像素和设备独立像素之间存在着一定的对应关系，这就是接下来要说的设备像素比。

设备像素比(device pixel ratio )

设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系，它的值可以按如下的公式的得到

设备像素比 = 物理像素 / 设备独立像素 // 在某一方向上，x方向或者y方向

 概念说起来很难理解   看一下不同像素比下的表现，看作是2cmx2cm的正方形被切割成四块，然后遇到dpr为2的时候，被切割的四块又被分别切割成四块，但是总面积不变。

扫描二维码关注公众号，回复： 10088161 查看本文章

为什么模糊呢？

在图片中表现在浏览器中时候   位像视图已经 是图像表现的最小单元可  但是 还有一些临近的需要表现  它不能再被进行切割。于是为了能够显示出来，就只能就近取色，从而导致所谓的图片模糊问题。 一句话就是面积小 结果分的小格太多了，怎么消除，就是   就是使用跟dpr同个倍数大小的图片

在javascript中，可以通过window.devicePixelRatio获取到当前设备的dpr

如果是直接引入的img 标签   在页面渲染前 判断 window.devicePixelRatio 的值 ，然后在页面中引入 不同的图片

       if(window.devicePixelRatio===2)
        {
          //......

        } else{

            //.....
        }

在css中，可以通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询，对不同dpr的设备，做一些样式适配(这里只针对webkit内核的浏览器和webview)。

@mixin bg-image($url) {

    background-image: url($url + "_2x.png");

    @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {

        background-image: url($url + "_3x.png");

    }

}