iphone - iPhone 上的 CSS 像素与设备像素

Question

如果我指定 <div> 的宽度使用 CSS 标记为 96px，在第一代 iPhone 的屏幕上应该占用多少设备像素？

我添加了 <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>到页面，在模拟器上截图，测出div为 96 设备像素宽。现在，我读了 W3 spec for CSS pixels它指出 1px 是 1/96 英寸。所以 96 CSS 像素应该转换为 1 英寸。由于原始 iPhone 有一个 DPI of 163 ，屏幕上的一英寸应占用 163 个设备像素。为什么我没有得到那个测量值？换句话说，96 个 CSS 像素应该等于 1 英寸吗？

我看到规范还提到锚定到引用像素。在我看来，在这种情况下，引用像素只是一个设备像素。如果我要逆向工作以从屏幕截图中获取 CSS 像素值，假设一个设备像素等于 iPhone(非视网膜显示屏)上的一个 CSS 像素通常是否正确？

Answer 1

Iphone 像素与任何其他像素一样。 96 像素宽 <div>在任何设备中始终为 96px 宽。 DPI(Dots Per Inch)只是告诉您屏幕(或纸张)上的物理像素(点)与英寸之间的比率，并不代表任何尺寸。 DPI 只是像素与现实世界测量单位之间的比率。

A 96px div在 50 DPI 屏幕上看起来比 300 DPI 屏幕大 6 倍。

DPI 因设备或打印/扫描质量而异，因此 1 英寸并不总是等于 96 像素。 W3C 只是说绝对长度单位是固定的相对于彼此(这只是使 CSS 单位一致的任意近似值)。这并不意味着可以为现实世界的测量单位(英寸、厘米)指定与像素的固定比率。

我能帮助您理解这一点的最好方法是 1px 仅且始终等于 1px。像素和现实世界单位之间的任何比较都取决于特定设备的 DPI，而不是像 W3C 这样的标准。

The absolute length units are fixed in relation to each other and anchored to some physical measurement. They are mainly useful when the output environment is known.