CODEWITHSUNDEEP
csswebretina-displayw3c
SKing7
SKing7

Reputation: 2356

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

Upvotes: 0

Views: 671

Answers (2)

light
light

Reputation: 4297

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.

Upvotes: 0

Jonathan Rowny
Jonathan Rowny

Reputation: 7588

The physical unit is based on 96dpi, therefore 1in in css is 96px, so 3.5in = 336px. Here's a blog post which can explain this: http://www.quirksmode.org/blog/archives/2012/11/the_css_physica.html but it's also mentioned in the W3 spec you posted if you scroll down a bit.

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.

Upvotes: 1

Related Questions