设备像素、设备独立像素、CSS 像素

设备像素：屏幕上的真实像素点。iphone6 的设备像素 750 * 1334，也就是说 iphone6 屏幕上有 750 * 1334 个像素点。

设备独立像素：操作系统定义的一种长度单位。iphone6 的设备独立像素 375 * 667，正好是设备像素的一半。

CSS 像素：CSS 中的长度单位，在 CSS 中使用的 px 都是指 CSS 像素。

为了从视觉上更好的区别设备像素和设备独立像素，下文中统一用 物理像素 来代表设备像素，用 独立像素 来代表设备独立像素。

早期的移动设备，只有物理像素，没有独立像素，在不缩放的前提下，CSS 中的 1px 就代表着 1 个物理像素。比如 iphone3 的物理像素是 320 * 480，那么 width: 320px; 的元素将会占满 iphone3 的屏幕宽度。

iphone3.png

从 iphone4 开始，苹果公司便推出了所谓的 Retina 屏，物理像素变成 640 * 960，但是屏幕尺寸没有变化，也就是说单位面积上的物理像素的数量增加了，或者说屏幕密度增加了。如果还按照原来那样，1px CSS 像素由 1 个物理像素来渲染， 那么 width: 320px; 的元素只会占据半个屏幕的宽度。原来在 iphone3 上能够占满屏的网页，在 iphone4 上只会占一半的屏幕，同时 font-size: 20px; 的字体在 iphone4 上的尺寸也会缩小。

iphone4.png

为了让同一个网页在 iphone4 和 iphone3 上的有相同的显示效果，引入了独立像素的概念。iphone4 的独立像素为 320 * 480，是 iphone4 的物理像素的一半，和 iphone3 的物理像素一样。也就是说，iphone4 上的 1 个独立像素 == 2 个物理像素。在 iphone4 上，在不缩放的前提下，CSS 中的 1px 便由 1 个独立像素来渲染，相当于 2 个物理像素。这样，width: 320px; 的元素由 320 个独立像素来渲染，也就是由 640 个物理像素来渲染，正好占满 iphopn4 的屏幕宽度。font-size: 20px; 的字体在 iphone3 和 iphone4 上的尺寸也相同，只不过在 iphone4 上的字体更清楚。

iphone4-2.png

我们已经知道，iphone4 上，1 个独立像素 == 2 个物理像素，但是不是所有的设备上都这样。下图展示了不同型号的 iphone 的物理像素和独立像素 (设备分辨率代表物理像素，逻辑分辨率代表独立像素)。

分辨率.png

为了描述不同型号的手机物理像素和独立像素之间的关系，引入了一个新的概念：设备像素比 devicePixelRatio。在 js 中通过 window.devicePixelRatio 查看。

devicePixelRatio = 物理像素 / 独立像素

iphone3: devicePixelRatio = 320 / 320 = 1
iphone4: devicePixelRatio = 640 / 320 = 2
iphone6Plus: devicePixelRatio = 1242 / 414 = 3

在 media 查询中，resolution 就代表着 devicePixelRatio。

@media (min-resolution: 2dppx) {
  body {
    color: red;
  }
}

上面的代码表示，在 devicePixelRatio >= 2 的设备上，字体颜色为红色。

参考资料

• 移动前端开发之viewport的深入理解
• 响应式设计——理解设备像素、设备独立像素和css像素