设备像素、CSS 像素、设备独立像素、dpr、ppi 之间的区别

1. CSS 中的 1px 指的是什么？

PC 端 CSS 一个像素就是对应着电脑屏幕的一个物理像素。实际上 CSS 中的像素只是一个抽象的单位，不同的设备或不同的环境中，CSS 中的 1px 所代表的设备物理像素不同。

2. CSS 像素（CSS pixel, px）

CSS 像素适用于 web 编程，在 CSS 中以 px 为后缀，是一个长度单位。

在 CSS 规范中，长度单位可以分为两类：绝对单位与相对单位。

  • px 是一个相对单位，相对的是 设备像素（device pixel）。
  • 一般情况下页面缩放比为 1，1 个 CSS 像素等于 1 个设备独立像素。
  • CSS 像素具有两方面的相对性：页面缩放、dpr 不同。

3. 设备像素（device pixels / 物理像素）

设备像素又称为物理像素，指设备能控制显示的最小物理单位，不一定是一个小正方形区块，也没有标准的宽高，只是用于显示丰富色彩的一个"点"而已。从屏幕在工厂生产出的那天起，它上面的设备像素点就固定不变了，单位为 pt。

4. 设备独立像素（Device Independent Pixel）

设备独立像素与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素，是一个总体概念，包括了 CSS 像素。

  • 在 JavaScript 中可以通过 window.screen.width / window.screen.height 查看。
  • 一个设备独立像素里可能包含 1 个或者多个物理像素点，包含的越多则屏幕看起来越清晰。
  • 例如 iPhone 3GS 的分辨率是 320×480（320 物理像素），iPhone 4/4s 的分辨率是 640×960（640 物理像素），尺寸都是 3.5 寸；为统一体验，系统把它们都映射为 320 个"虚拟像素"，于是产生了"虚拟像素 → 物理像素"的换算关系。
  • 1 个虚拟像素被换算成几个物理像素，这个数值称为设备像素比（dpr）。

5. dpr（设备像素比）

代表设备独立像素到设备像素的转换关系，在 JS 中可以通过 window.devicePixelRatio 获取：

  • 当设备像素比为 1:1 时，使用 1（1×1）个设备像素显示 1 个 CSS 像素。
  • 当设备像素比为 2:1 时，使用 4（2×2）个设备像素显示 1 个 CSS 像素。
  • 当设备像素比为 3:1 时，使用 9（3×3）个设备像素显示 1 个 CSS 像素。

6. ppi（每英寸像素）

ppi（pixels per inch），每英寸像素，表示每英寸所包含的像素点数目，更确切的说法应该是像素密度。数值越高，说明屏幕能以更高密度显示图像。

计算公式：ppi = 屏幕对角线像素数 / 屏幕对角线英寸数。

补充

补充：

  • 这套概念是理解"移动端 1px 问题"、"高清图 @2x/@3x"的基础，详见 css-064 / css-068。
  • iOS 的 iPhone 6/7/8 为 dpr=2，iPhone 6/7/8 Plus 为 dpr=3，设计稿通常以 iPhone 6（375×667，dpr=2）的 750×1334 物理像素出图。
  • 在移动端，window.devicePixelRatio 可以读到当前 dpr。
  • 通常我们用 viewport meta 控制移动端布局： 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    让 1 CSS 像素 = 1 设备独立像素，避免移动端按 980px 默认 layout viewport 显示。
  • 写 1px 边框时，由于 dpr=2 时 1 CSS 像素对应 2×2 个物理像素，会显得"偏粗"——所以才会有 css-064 提到的"移动端 1px 问题"以及用 transform: scaleY(0.5) 来还原"真实半像素"。