pt 单位在物理上始终如一地测量是真的吗?

Is it true that the pt unit will ALWAYS physically measure consistently?

假设我想使用 pt 单元来确保我的 html 页面在 device/browser/os 中看起来一致。我对 pt 的理解是它应该等于屏幕上的 1/72 英寸。

Codepen

HTML

<html>
<body>
  <div></div>
</body>
</html>

CSS

div {
  background-color:black;
  height: 72pt;
  width: 72pt;
}

这或多或少会在我的屏幕上产生一个 1" x 1" 的正方形(这只是我所看到的屏幕截图)。但是,我可以实际将尺子放在我的显示器上并进行测量,结果更像是 1 3/16"。

我的浏览器缩放级别是 100%,所以这不会影响事情。我在 Windows 8.1 上使用 Chrome 并设置了默认字体大小(Chrome 中为 16)。我的 OS 缩放级别是 100%。我有一个 24" 显示器设置为 1920x1080 分辨率。另外值得注意的是,Chrome 报告正方形正好是 96x96 像素。

这让我相信我所听到的,现实世界中任何给定 display/browser/OS 组合的 72pt = 1 物理英寸是不准确的。这是正确的吗?

鉴于此行为,我假设如果我有一台具有相同分辨率的 22" 显示器,像素密度会更大,因此正方形会显得更小(可能更接近于 1",通过物理标尺)。

Retina 显示屏如何处理所有这些?我假设正方形不会显得小两倍(那太傻了)。浏览器是否在对超高 DPI 显示器进行某种内部处理?例如,Chrome 似乎有一些 "device pixel ratio (DPR)" 的概念,因此它可以将 "true" 分辨率为 2048 x 1536 (DPR 2) 的 iPad 视为更标准的1024 x 768。所以我假设 DPR 最终会在某种程度上标准化 DPI 截然不同的屏幕,但在考虑到这一点之后,different devices with different DPI/PPI 仍然会看到我们的正方形的物理尺寸略有不同。

Is it true that the pt unit will ALWAYS physically measure consistently?

不,CSS 在 2011 年放弃了该要求,因为大多数人无论如何都忽略了它。

https://www.w3.org/Style/Examples/007/units.en.html有更详细的解释

The so-called absolute units (cm, mm, in, pt and pc) mean the same in CSS as everywhere else, but only if your output device has a high enough resolution. On a laser printer, 1cm should be exactly 1 centimeter. But on low-resolution devices, such as computer screens, CSS doesn't require that. And indeed, the result tends to be different from one device to another and from one CSS implementation to another. It's better to reserve these units for high-resolution devices and in particular for printed output. On computer screens and handheld devices, you'll probably not get what you expect.

In the past, CSS required that implementations display absolute units correctly even on computer screens. But as the number of incorrect implementations outnumbered correct ones and the situation didn't seem to improve, CSS abandoned that requirement in 2011. Currently, absolute units must work correctly only on printed output and on high-resolution devices.

CSS doesn't define what “high resolution” means. But as low-end printers nowadays start at 300 dpi and high-end screens are at 200 dpi, the cut-off is probably somewhere in between.