dpr（设备像素比）与 移动端适配

在上一篇文章中（使用 rem 实现移动端的自适应布局），我们讲到 iphone6s 的屏幕宽度为 375px，我们拿到的视觉稿也是基于iphone6s 设计的，但是设计稿的宽度却是 750px，这是为什么呢？

原因就是 iphone6s 的屏幕 dpr = 2，首先我们先理解 3 个概念：

物理像素(physical pixel)

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

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

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

设备像素比(device pixel ratio 简称 dpr)

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

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

像素密度（Pixels Per Inch 简称 PPI）

表示的是每英寸所拥有的像素数量。因此PPI数值越高，即代表显示屏能够以越高的密度显示图像。当然，显示的密度越高，拟真度就越高。我们经常说的视网膜屏幕（Retina）,之所以看起来清晰度高，是因为其 ppi 很高的 。而图像、色彩还原度高是其 dpr 比一般的设备高；

以 iphone6s 为例：

• 设备宽高为 375×667 ，可以理解为设备独立像素(逻辑像素 或者 css 像素)。
• dpr = 2（也就是我们通常说的“二倍屏”），可以得出其物理像素应该是其逻辑像素的 2 倍，750 * 1334。

如下图（图是盗的）：

由上图可以看出，同样的 css 代码：

{
    width:2px;
    height:2px;
}

在不同的设备上所呈现的效果是不一样的，在普通一倍屏上，其表示 2 * 2 个物理像素点，而在二倍屏上，其表示 4 * 4 个物理像素点；

位图（bitmap）

亦称为点阵图像或栅格图像，是由称作像素（图片元素）的单个点组成的。即每一个图像像素都包含一些自身的显示显示信息（如：显示位置，颜色值，透明度等等），我们常用的 web 图片（如 png，jpg，gif，bmp）都是位图；与之对应的是矢量图（如 swf、svg 等等）矢量图可以无损缩放，而位图不行，对其进行放大时就会模糊，原因如下图（图是盗的）：

对于二倍屏来说，1个位图像素对应于4个物理像素，由于单个位图像素不可以再进一步分割，所以只能就近取色，从而导致图片模糊(注意上述的几个颜色值)； 

所以一张宽度为 375px 的图片，同样都是 375×667的设备铺满屏幕， 在一倍屏上显示是正常的，而在二倍屏上显示就会变模糊；针对此问题，比较好的解决方案就是 用“二倍图片”（@2x），也就是使用宽度为750px的图片。这就解释了视觉稿宽度通常为 750px。

也许大家有个疑问：那一倍屏中显示二倍图片，会不会有问题呢？

其实问题不会太大，设备会根据图像的四个像素信息，算出其在一个像素点上应该如何显示，只是会使图片缺少一些锐度罢了。

设备的 dpr 不同，所导致也不仅只有图片的显示问题，还有 边框1px 问题等，具体在 下一篇 rem 实现移动端适配一些细节处理。

文章有什么遗漏或者不正确的地方，劳烦各位指出，万分感谢！