4

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

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

我看到规范还提到了锚定到参考像素。在我看来，在这种情况下，参考像素只是一个设备像素。如果我向后工作以从屏幕截图中获取 CSS 像素值，假设一个设备像素等于 iPhone 上的一个 CSS 像素（非视网膜显示器）通常是正确的吗？

4

1 回答 1

2

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

96pxdiv在 50 DPI 的屏幕上看起来比 300 DPI 的屏幕大 6 倍。

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

我能给你的最好的帮助来理解这一点是 1px 只是并且总是等于 1px。像素和真实世界单位之间的任何比较都取决于特定设备的 DPI，而不是像 W3C 这样的标准。

绝对长度单位相对于彼此是固定的，并且锚定到一些物理测量。它们主要在输出环境已知时有用。

于 2012-10-04T22:13:28.643 回答