物理像素、逻辑像素与PPI、DPI

Category（分类）: HTML Status: 未知

目录

• 引子：375px 的疑问
• 物理像素
• 逻辑像素
• 为什么要引入逻辑像素
• CSS 像素与设备像素比（dpr）
• dp 与 points
• PPI 和 DPI 的经典定义
• PPI 和 DPI 的知识延伸
• iOS 开发中的 points
• Android 开发中的 dp 与 DPI
• 总结

引子：375px 的疑问

写这篇文章是因为折腾网站响应式设计时，注意到调试工具里显示 iPhone X 可视区域宽度才 375px。iPhone X 屏幕物理分辨率是 2436×1125，宽度不应该显示 1125px 才对吗？

带着这个疑问一查，牵扯出了本文要梳理的一串概念：物理像素、逻辑像素、PPI、DPI、dpr、dp、points。

物理像素

手机屏幕或电脑屏幕，本质上可以看成几百万个微小的"彩色灯泡"组成的阵列，每一个这样的最小物理单元就是一个物理像素（physical pixel），也称设备像素（device pixel）。

每个物理像素又由红、绿、蓝三个子像素（sub-pixel）组成。三个子像素混色后呈现为一个像素的最终颜色，肉眼无法直接分辨子像素：

物理像素由屏幕硬件决定，出厂即固定，任何软件都无法改变它的数量和物理尺寸。屏幕的"物理分辨率"（如 2436×1125）指的就是物理像素的行列数。

逻辑像素

逻辑像素（logical pixel）可以看成数字世界的像素，是电子图片的最小可寻址单元。当我们在 PS 里创建一张 300×300 像素的图片时，指的就是逻辑像素。

与物理像素的关键区别：逻辑像素没有固定的物理尺寸。同一张 300×300 的图片，在不同屏幕上显示出来的物理大小可能完全不同——除非指定显示条件（屏幕尺寸和分辨率），它的实际物理尺寸是不确定的。

为什么要引入逻辑像素

假设世界上暂时没有逻辑像素的概念，"像素"仅仅指物理像素。想象一个 3×5 像素的字母 F 显示在 8×8 像素的低分屏上，一切正常。

后来屏幕升级，物理分辨率提升到 16×16，而字母的长宽（像素数）不变——结果显而易见：字母在屏幕上看起来缩小到了原来的一半。

目光放到智能手机上：早年手机屏幕物理分辨率至多 720P，如今不少手机达到了 4K。如果坚持只用物理像素描述尺寸，那么在 720P 手机上正常显示的一段文字，放到 4K 手机上会小到几乎无法阅读。

所以我们需要引入独立于物理介质之外的逻辑像素：仍用"3×5"描述字母 F，但这里的像素指逻辑像素。厂商如果希望高分屏上的 F 和低分屏上的 F 看起来一样大，只需让一个逻辑像素对应多个物理像素即可。这就是"密度独立性"（density independence）的思想。

CSS 像素与设备像素比（dpr）

现在回答开头的疑问。

CSS 中的 px 指的是逻辑像素，不是物理像素。

设备像素比（device pixel ratio，简称 dpr）定义了物理像素和逻辑像素的对应关系：

dpr = 物理像素 / 逻辑像素

以 iPhone X 为例：

一个 CSS 像素 = 3×3 = 9 个物理像素。所以调试工具显示宽度 375px 是逻辑分辨率，而不是 1125 物理像素。

在前端开发中：

• JS 里用 window.devicePixelRatio 获取 dpr；
• CSS 里可用媒体查询 -webkit-device-pixel-ratio、标准的 resolution 做 dpr 相关适配（如响应式图片的 1x/2x/3x、移动端 1px 边框问题）。

dp 与 points

逻辑像素这个名字在实际开发中并不常作为正式术语使用，同样的思想在不同平台有各自的名称：

注意两点：

1. Android 的 dp 全称是 density-independent pixel（密度无关像素），不是"设备独立像素"（device-independent pixel）。后者是 Windows 等平台的叫法，概念相近但术语不同；
2. iOS 的 points 与印刷行业的 pt（1/72 英寸）确实无关，只是重名。iOS 的 point 是一个纯逻辑单位，其物理大小随设备 dpr 变化。

这些概念的本质是相同的：都是为了屏蔽物理分辨率的差异，让同一份尺寸描述在不同密度的屏幕上呈现相近的物理大小。

PPI 和 DPI 的经典定义

PPI（Pixels Per Inch，每英寸像素数），又称像素密度，表示每英寸长度上的像素数量。屏幕 PPI 的计算方法：对角线上的物理像素数除以对角线长度（英寸）：

PPI = √(nx² + ny²) / l

其中 nx、ny 是水平和垂直方向的物理分辨率，l 是对角线长度（英寸）。

以对角线为准是因为：大多数设备是正方形像素（水平和垂直 PPI 相同），但也有个别设备是非正方形像素。如果已确定两个方向密度相同，也可以直接用 PPI = nx / x（x 为屏幕宽度英寸数）计算。

例：iPhone X 物理分辨率 1125×2436，屏幕 5.85 英寸（对角线）：

PPI = √(1125² + 2436²) / 5.85 ≈ 2683 / 5.85 ≈ 458

DPI（Dots Per Inch，每英寸点数）本来是打印领域的量度单位，指每英寸长度中取样、可显示或输出墨点的数目。

打印机无法像屏幕那样"点亮像素"，而是通过喷洒四种颜色（青、品红、黄、黑，即 CMYK）的墨点来重现图像。墨点之间必然有空隙，DPI 描述的就是这些墨点的密度：

PPI 和 DPI 的知识延伸

现实中 PPI 和 DPI 这两个词大量混用。如今"dot"既可以指印刷的墨点，也可以指数字图像的逻辑像素，还可以指屏幕的物理像素。很多地方说 DPI，实际想表达的其实是 PPI。

好在 PPI 一直是 PPI。与其纠结某处措辞该用 PPI 还是 DPI，不如结合上下文理解具体在说什么。一个可靠的判断方法：

• 屏幕相关参数 → 实质都是 PPI（每英寸物理像素数）；
• 打印、扫描相关参数 → 是传统 DPI（每英寸墨点数）；
• Android 系统里说的 DPI → 指屏幕像素密度，即 PPI。

另外，在 PS 等软件的新建画布窗口里也有一个"PPI/分辨率"参数。除非要把图片打印出来，这个参数对屏幕显示几乎没有意义——因为逻辑像素没有固定物理尺寸。

打印时，屏幕图片的每个像素会被转换成一个小方形的"色块"（由墨点组成）。此时 PPI 参数的意义是调节打印物理大小，而不是调节分辨率：

• 一张 300×300 像素的图片，以 300 PPI 打印，物理尺寸正好 1×1 英寸；
• 降低 PPI（如 150），打印尺寸变成 2×2 英寸——"像素方块"变大了，图片看起来更粗糙；
• 但图片的绝对分辨率没变，还是 300×300 像素，站远一点看清晰度和原来一样。

iOS 开发中的 points

iPhone 屏幕遵循一个直观原则：屏幕越大，显示内容越多。

iOS 布局使用密度无关单位 points（pt）。开发者只需按逻辑分辨率设计，换算工作交给系统：系统检测到设备型号，确定渲染倍率（scale），一个 point 对应相应数量的物理像素。例如 iPhone 8 的渲染倍率为 2，即 1pt = 2×2 物理像素。

常见 iPhone 型号的对应关系：

几点说明：

• 渲染倍率的基线是 iPhone 3GS：3GS 上 point 和物理像素一一对应，倍率为 1；
• Plus 机型比较特殊：按 3x 渲染出 1242×2208 的缓冲区，再降采样到 1080×1920 的物理屏幕，所以物理分辨率和 3x 逻辑分辨率并非严格整倍对应；
• 苹果通过让逻辑分辨率与屏幕物理尺寸挂钩（而非物理分辨率），实现了"屏幕越大、显示内容越多"：iPhone 6 相对 iPhone 5 屏幕面积增大约 37%，逻辑分辨率也相应增大约 37%。

Android 开发中的 dp 与 DPI

首先要指出一个经典混用：Android 系统里说的 DPI，指的就是 PPI（屏幕像素密度）。

Android 设备碎片化严重，屏幕密度五花八门。不可能为每一种精确密度单独适配，于是 Android 把屏幕按密度范围分成若干"密度桶"（density bucket），每个桶指定一个系统内置密度。应用只需针对密度桶（而非每一种精确密度）适配。

以下是各密度桶（以 mdpi 为 1x 基准）：

注意 xhdpi 是 320 dpi 而不是 360 dpi。判断设备落入哪个桶的规则可以粗略理解为"实际密度四舍五入到最近的桶"，这项工作由系统完成，应用开发者无需关心。

Android 与 iOS 一样使用密度无关单位，只是叫 dp。设备检测到系统密度后确定换算比例，例如系统密度 480（xxhdpi）时，1dp = 3 物理像素。

dp 的物理尺寸推导：当设备实际密度恰好等于桶的密度时，1dp 恒等于 1/160 英寸：

当设备实际密度不等于桶密度时，dp 的物理尺寸会产生偏差：

规律：设备实际密度低于桶密度时，每个物理像素物理上更大，1dp 也被"撑大"；反之 1dp 被缩小。

为什么 Android 允许这种偏差？主要有两个原因：

1. 避免非整数换算带来的伪像和锯齿：dp 按桶比例（0.75/1/1.5/2/3/4）整齐地换算为整数像素；若追求物理尺寸绝对一致，就会出现 3.14159 px/dp 这种无法整齐映射的情况；
2. 与图片资源对齐：为各密度桶准备的图片资源（mdpi/hdpi/xhdpi…）按桶比例缩放，dp 与之成比例对应，渲染时无需再次插值。

另外，Android 允许厂商在定制 ROM 中修改设备的 DPI。对于"屏幕变大但分辨率没跟上"的机型（如大屏入门机），厂商可以调低 DPI，让单位面积显示更多内容，达到屏幕越大，显示内容越多的效果。

总结

1. 物理像素是屏幕硬件的最小单元，出厂固定；逻辑像素是数字世界的抽象单位，无固定物理尺寸；
2. 引入逻辑像素是为了密度无关性：让同一份尺寸描述在不同分辨率的屏幕上呈现相近的物理大小；
3. CSS 的 px 是逻辑像素；dpr = 物理像素 / 逻辑像素，iPhone X 为 3，所以调试工具显示 375px（逻辑分辨率）；
4. PPI 描述屏幕/图像的像素密度，计算公式 PPI = √(nx² + ny²) / l；DPI 本指打印墨点密度，现实中与 PPI 大量混用，需结合语境理解；
5. 打印场景下的 PPI 参数是调节物理打印尺寸的方式，不改变图片的绝对分辨率；
6. iOS 的 points 与 Android 的 dp 是同一思想的不同实现：iOS 按机型确定渲染倍率（1x/2x/3x），Android 按密度桶（mdpi 为 160dpi 基准，1dp = 1/160 英寸）确定换算比例；
7. 各平台命名对照：Web 用 CSS px，Android 用 dp（density-independent pixel），iOS 用 pt（与印刷 pt 无关）。

参考资料

• MDN：CSS 值与单位
• MDN：window.devicePixelRatio
• Android 开发者文档：屏幕兼容性概览
• Wikipedia：Pixel density
• Wikipedia：Dots per inch