什么是屏幕 PPI？为什么它决定了测量精度

如果你试过在屏幕上显示一把"真实大小"的尺子，大概发现过一个问题：测量结果经常不对。同样一条 10 厘米的线，在这台电脑上看是 10 厘米，换一台就变成了 9 厘米。背后的原因归结为一个数字——屏幕的 PPI。

PPI 是什么

PPI 的全称是 Pixels Per Inch（每英寸像素数），表示屏幕物理表面上每英寸塞进了多少个像素点。

计算公式很直接：

PPI = 对角线像素数 / 对角线屏幕尺寸（英寸）

对角线像素数 = sqrt(横向像素^2 + 纵向像素^2)

举个例子，iPhone 15 Pro 的屏幕是 6.1 英寸、2556 × 1179 像素：

对角线像素 = sqrt(2556^2 + 1179^2) = 2815
PPI = 2815 / 6.1 = 461 PPI

一台 24 英寸的 1080p 显示器：

对角线像素 = sqrt(1920^2 + 1080^2) = 2203
PPI = 2203 / 24 = 92 PPI

手机每英寸的像素数是显示器的五倍。这就是你在显示器上能看到像素点、在手机上看不到的原因。

PPI 为什么影响屏幕测量

当网页想显示一条"刚好 1 英寸"的线时，它需要知道在你的屏幕上多少像素等于 1 物理英寸。这个数字就是 PPI。

问题在于： 浏览器不会可靠地报告真实 PPI。CSS 规范把 1 英寸定义为 96 像素——但这是参考值，不是你屏幕的实际 PPI。在 227 PPI 的 MacBook 上画 96 像素，实际长度大约 0.42 英寸，连一半都不到。

这就是为什么不校准的屏幕尺子不准确。它们假设 PPI 是 96 或用一个粗略估计值，结果可能偏差 10-50%。

校准如何解决这个问题

校准的作用是弥合浏览器假设的像素密度和屏幕实际像素密度之间的差距。

Screen Ruler Online 的方法是：

把一个已知尺寸的实物放在屏幕上——信用卡（宽 85.6 毫米）、美国 25 美分硬币（直径 24.26 毫米）或其他参照物
调整滑块直到屏幕上的参照物和实物完全吻合
工具计算已知物理尺寸与实际占用像素的比值
后续所有测量都使用这个校准后的比值

这个方法不受设备、系统、浏览器的限制。它还能自动处理浏览器缩放、显示缩放比例和子像素渲染等复杂因素。

不同设备的 PPI 差异

| 设备类型 | 典型 PPI | 示例 | |----------|----------|------| | 台式显示器（1080p，24 寸） | 92 | Dell P2419H | | 台式显示器（4K，27 寸） | 163 | LG 27UK850 | | MacBook Air 13 寸 | 227 | M2 MacBook Air | | iPad Pro 12.9 寸 | 264 | iPad Pro 第 6 代 | | iPhone 15 | 460 | 标准版 | | Samsung Galaxy S24 | 416 | 标准版 |

从 92 PPI 到 460 PPI，跨度巨大。一条按 96 CSS 像素画的"1 英寸"线只会在那一种显示器上正确——在其他所有设备上都是错的。

PPI、DPI 和设备像素比的区别

PPI（每英寸像素数）： 屏幕的物理像素密度，由硬件决定，无法更改。

DPI（每英寸点数）： 原本是印刷术语。在数码领域，人们经常混用 DPI 和 PPI，但严格说 DPI 指的是打印输出分辨率。

设备像素比（DPR）： CSS 像素和物理像素的比值。DPR 为 2 表示每个 CSS 像素对应 2×2 个物理像素。苹果的 Retina 屏幕 DPR 通常是 2 或 3。

对于屏幕测量来说，重要的是 PPI 和 DPR 的组合。但因为浏览器不一定能准确报告这些数值，所以直接用实物校准比数学计算更可靠。

Screen Ruler 如何使用 PPI

首次访问 Screen Ruler Online 时，工具会尝试自动识别你的设备。它内置了 50 多种热门设备（iPhone、Samsung Galaxy、iPad、小米、OPPO 等）的 PPI 数据。

识别到设备后，尺子会用预设的 PPI 值启动。但即便如此，仍然建议用实物校准，因为：

浏览器缩放会改变有效像素密度
系统显示缩放（如 Windows 的 125%、150%）会影响 CSS 到物理像素的映射
不同浏览器的像素取整方式不同

校准完成后，设置会存在浏览器本地，下次访问不需要重新校准。

总结

PPI 是你的屏幕和别人屏幕显示尺寸不一样的根本原因。浏览器没有可靠的方式获取这个数值。校准——用已知尺寸的实物匹配屏幕显示——是最直接的解决办法。