2

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 320px, 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?

Community
  • 1
  • 1
Orlin Georgiev
  • 1,391
  • 16
  • 18

1 Answers1

1

This is an interesting question. I'm familiar with the way media queries work for iOS devices, but less so with Android devices. I'll take a stab at it anyway.

Let's start with dppx, which you probably know is a measurement of how many physical dots fit into each pixel (let's use your terms "physical pixels" and "logical pixels"). 3dppx means that each of the screen's logical pixels is composed of a 3x3 grid of physical pixels. To use iOS terminology, your display has a @3x resolution, like the iPhone 6 Plus.

You can see a list of various device dppx values here:

http://bjango.com/articles/min-device-pixel-ratio/

(The site refers to -webkit-min-device-pixel-ratio, which predates dppx, but I think means exactly the same thing.)

If you know a device's physical width and dppx you can use the following formula to calculate its logical width, which you can use in media queries:

device width / dppx = logical width

For your device this should be:

1080 / 3 = 360

I would therefore expect the following media query to target your device in portrait mode:

@media only screen and (max-width: 360px) { }

As for the 288dpi: A 1dppx device has 96dpi, and 3 x 96 = 288. I'm not sure where the manufacturer's 467dpi comes from, but it doesn't seem relevant to writing media queries.

Jonathan Nicol
  • 3,158
  • 1
  • 21
  • 22
  • Thanks for your answer! I understand the reasoning behind iOS's use of logical pixels, but it seems here that Android doesn't use this scheme at all and sticks to physical pixels. The fact is that this phone satisfies this query: @media (min-width: 1079px) and (max-width: 1081px) As you see this is very very far from the min-width: 360px that you mentioned. Besides, when I set the size of a
    in "px" it appears in physical pixels, not logical, albeit the 3dppx reported density.
     – Orlin Georgiev Mar 07 '15 at 14:58
  • The manufacturer listed 469dpi is not a mistake and can easily be calculated as 1080pixels / 2.3 inches wide screen. The specs can be found at: http://gsmarena.com/htc_one-5313.php min-resolution is really the same as -webkit-min-device-pixel-ratio, which is reported as 3.0 too for this phone. But it seems there is a fundamental difference that Android always means physical pixels for "px", while iOS means logical. – Orlin Georgiev Mar 07 '15 at 14:58
  • 1
    I assume you've set your viewport meta tag to scale the page to the device width? e.g. – Jonathan Nicol Mar 07 '15 at 20:25
  • Yes, here it is: – Orlin Georgiev Mar 08 '15 at 08:25