CSS pixels versus device pixels on iPhone

Question

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

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 by 96 pixels of the device. Now I read the W3 spec for CSS pixels , and it claims that 1px is 1/96 of an inch. So 96 pixels CSS should translate to 1 inch. Since the original iPhone has a DPI of 163 , one inch on the screen should occupy 163 pixels of the device. Why am I not getting this measurement? In other words, should 96 pixels CSS be equal to 1 inch?

I saw that the specifications also referred to anchor to the reference pixel. It seems to me that the reference pixel is just a device pixel in this case. If I had to work backwards to get CSS pixel values ​​from a screenshot, would it be generally correct to assume that one pixel of the device is equal to one CSS pixel on the iPhone (non-mesh display)?

Answer 1

Iphone pixels are like any other pixel. 96px width always has 96px width on any device if it doesn't scale. Remember that DPI simply tells you the px / inch ratio for a particular device and will never have a “universal” value. This is just the relationship between pixels and the real world.

The pixel size changes on each device, so 1 inch is NOT equal to 96 pixels. W3C simply says that absolute length units are fixed relative to each other (it's just an arbitrary approximation to make CSS units consistent). This does not mean that real world units can be compared with pixels within a fixed proportion.

The best help I can solve for you is that 1px is equal to 1px, and any other comparison between pixels and units of the real world depends on the specific device, and not on universal standards such as W3C.

Units of absolute length are fixed relative to each other and tied to some physical measurements. They are mostly useful when the output environment.