Making sense of CSS media query results

Vote count:

0

I'm trying to make sense of CSS media queries for a mobile-only page. My final goal is to have the font size on my page be about the same in physical units (inches/centimeters) regardless of decice physical size and resolution. But what I see reported by the media queries has nothing to do with the device specs.

I'm testing on an HTC One M7, which is 1080x1920, 467dpi - manufacturer specs.

The precise numbers reported by the media queries is: width (as reported by min-width/max-width): 1080px resolution (as reported by min-resolution/max-resolution): 288dpi or 3.0dppx

First, shouldn't the pixels reported for the width be in logical pixels, not physical? I mean both iPhone3GS and iPhone4 report a width of 320 pixels, even though the latter is actually 640 physical pixels. See How to target iPhone 3GS AND iPhone 4 in one media query? How should I know what the browser meant by "pixel" when it matches a given query?

Second, the reported 288dpi has nothing to do with the actual device 467dpi. And how is this 3dppx calculated?

asked 41 secs ago

Orlin Georgiev

54

Making sense of CSS media query results