Search code examples
csswebretina-displayw3c

using css pixel calculating screen size, where is wrong?

In css w3(here),

1px = 0.75pt, 1pt = 2.54/72 cm, so 1 css pixel:1px = 0.26mm

for example, the CSS pixel of iPhone4 is 320px * 480px(not device pixel),
so in width ,the length should be: 

320 *0.26 = 83.2mm

but the iPhone4 is 3.5"，so the length in width is about 60mm,

it dont match the result i calculated above
where is wrong?
thanks

Solution

  • A CSS pixel is not always 0.26mm

    From CSS W3:

    The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm's length, 1px thus corresponds to about 0.26 mm (1/96 inch).

    The iPhone4 is not 96dpi. With a device pixel ratio of 2, its "CSS dpi" is around 163. Since 96dpi devices render 320px at 83.2mm, mathematically, 163dpi devices should render 320px at 49mm.