iPhone上的CSS像素与设备像素 [英] CSS pixels vs device pixels on iPhone

问题描述

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

If I specify the width of a <div> tag using CSS as 96px, how many device pixels should that occupy on the screen of a first generation iPhone?

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

I added <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> to the page, took a screenshot on the simulator, and measured the div to be 96 device pixels wide. Now, I read the W3 spec for CSS pixels and it states that 1px is 1/96th of an inch. So 96 CSS pixels should translate to 1 inch. Since the original iPhone has a DPI of 163, one inch on the screen should occupy 163 device pixels. Why am I not getting that measurement? In other words, should 96 CSS pixels be equal to 1 inch?

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

I saw that the spec also mentions anchoring to a reference pixel. It seems to me that the reference pixel is simply a device pixel in this case. If I was to work backwards to get the CSS pixel values from a screenshot, would it generally be correct to assume that one device pixel equals one CSS pixel on the iPhone (non-retina display)?

推荐答案

Iphone像素就像任何其他像素一样。在没有缩放的情况下，96px宽在任何设备中总是96px宽。请记住，DPI只是告诉您特定设备的px / inch关系，并且永远不会具有通用含义。它只是像素和现实世界之间的关系。

Iphone pixels are like any other pixel. A 96px wide is always 96px wide in any device, when it is not zoomed. Remember that DPI just tells you the px/inch relation for a particular device, and will never have an "universal" meaning. It is just a relation between pixels and the real world.

每个设备的像素大小都会发生变化，因此1英寸不等于96像素。
W3C只是说绝对长度单位相对于彼此是固定的 （它只是使CSS单位一致的任意近似值）。这并不意味着真实世界的测量单位可以在固定比例内与像素进行比较。

Pixel size changes in every device, therefore 1 inch is NOT equal to 96 pixels. W3C is just saying that the absolute length units are fixed in relation to each other (it is just an arbitrary approximation to make CSS units consistent). This does not mean that real world measurement units can be compared to pixels, within a fixed proportion.

我能给你解决难题的最佳帮助是1px是仅等于1px，像素和现实世界单位之间的任何其他比较取决于特定设备，而不是像W3C这样的通用标准。

The best help i can give you to solve the puzzle is that 1px is only equal to 1px, and any other comparison between pixels and real world units depends on the particular device, not on universal standards like 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.

这篇关于iPhone上的CSS像素与设备像素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！