web开发之像素和DPR详解

像素和DPR

我们在web开发的过程中，经常会提到「像素」这个词，那么，像素到底是什么？移动端的像素与桌面端是否有区别？同样大小的手机屏幕，为什么有的像素高，有的像素低？下面让我们通过资料阅读，一起找到这些问题的答案吧。

 

像素的定义

「像素」是图像显示的基本单位，译自英文「pixel」，一个像素就是屏幕上能够显示一种特定颜色的最小区域。如下图右侧图片中，每一小格子代表一像素：

当设备尺寸相同，但像素变得更密集时，屏幕能显示的画面过渡更细致，图像看起来就更清晰明快。由此定义了「屏幕像素密度PPI（pixel per inch）」，用于代表屏幕上每英寸可以显示的像素点的数量：

像素的分类

像素实际上分为两种：
1． 物理像素：又称设备像素(device pixels)，指设备屏幕的物理像素，一个屏幕里的物理像素数量是固定的。
2． 逻辑像素：又称CSS像素(CSS pixels)，是为web开发而创造的抽象概念，用于在CSS和JavaScript中以「px」描述位置、大小和间距的单位尺寸。

由于不同的设备屏幕，特别是移动端手机屏幕尺寸千差万别，物理像素也不一而同，在web开发过程中都是使用逻辑像素，物理像素很少会被用到。

随着移动设备屏幕技术的发展，手机的PPI(屏幕像素密度)越来越高。一个典型的例子就是，从iPhone4开始，苹果公司推出了retina视网膜屏幕。之所以叫做视网膜屏幕，是因为屏幕的PPI太高，人的视网膜无法分辨出屏幕上的像素点。iPhone4的PPI提高了一倍，但屏幕尺寸却没有变化，这意味着同样大小的屏幕上，像素多了一倍。

像素的增加对于同样大小的网页图像，在旧手机里全屏展示，在新手机里却只需要一半的屏幕就显示出来了，剩下的另一半屏幕将成为空白，这降低了web用户的体验。如何适配不同的手机屏幕，成为web开发者需要关心的问题。

DPR

设备像素比DPR(devicePixelRatio)，是指默认屏幕内容无缩放时，物理像素和逻辑像素的比值：

DPR = 物理像素 / 逻辑像素

在JavaScript里可以通过window.devicePixelRatio获取到用户设备的DPR值。

屏幕适配方案

了解了DPR的概念之后，我们就可以通过规则，将逻辑像素进行相应的转换，满足不同屏幕的显示需要，具体规则如下：

1. 当DPR为1时，使用1（1×1）个物理像素显示1个逻辑像素；
2. 当DPR为2时，使用4（2×2）个物理像素显示1个逻辑像素；
3. 当DPR为3时，使用9（3×3）个物理像素显示1个逻辑像素。

图示如下：

对应到web开发中，就是需要根据不同的DPR缩放网页内容，计算公式为：

图片缩放尺寸 = 图片逻辑像素 x DPR

具体以iPhone6为例，其屏幕宽度的物理像素共750个，逻辑像素是375px，所以DPR = 750 / 375 = 2，为了适配iPhone6，应该使用2倍大小的图片进行展示。