CODEWITHSUNDEEP
cssmobilemedia-queriespixel
Orlin Georgiev
Orlin Georgiev

Reputation: 1481

Making sense of CSS media query results

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?

Upvotes: 2

Views: 958

Answers (1)

Jonathan Nicol
Jonathan Nicol

Reputation: 3298

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.

Upvotes: 1

Related Questions