Pixel ratios: are the "fake" pixel values on hi-res devices applied to all width properties, or only to selected ones?

Question

I am doing some CSS for a web shop that lives entirely in the webview of a mobile app for Android and iOS. I'm using media queries to distinguish between phones and tablets.

I've figured out a way to keep my rules simple: there's a "phone" layout that applies to anything with a device width under 768 pixels. Everything else is a tablet layout. This works fine for my purposes.

The content is displayed inside an app which is forced into portrait mode on all phones. So if a user tilts their phone of, say 700 x 900 pixels, their device width is still 700px. So this is all good.

For a while I assumed things must be getting ugly with all the new mobile devices coming out, since they have ultra high resolutions. That would mean I'd be getting tablet layout on those phones.

Fortunately the OS and device makers have been ahead of this problem, and the pixel values are now much smaller than the actual number of pixels. There's a property called device-pixel-ratio which has values like 1.5 or 2.0 or 3.0 on new devices: ony when you multiply the reported pixels with that ratio do you get the number of actual pixels.

Great.

Now I'm wondering: does this setup (of "fake" pixel sizes) apply to all pixel-based CSS values? Most specifically, does it apply to all of the properties below:

• width
• device-width
• min-width
• min-device-width
• max-width
• max-device-width (and the same for height)

Or do some of these babies get the "real" pixel count while others get the "fake" one?

EDIT:

Chris explains in his answer that a hypothetical 700x900px device with device-pixel-ratio of 2 would report "350px" for width and "700px" for device-width. So if I wanted to make a media query that grouped this device with other phone-sized devices, and anything of iPad width or upwards as a tablet, would this be a correct media query...

@media only screen and (max-device-width: 767px) { /* Phone-sized styling */}

@media only screen and (min-device-width: 768px) { /* Tablet-sized styling */}

(Yes, I know that the orientation property also comes into play here for iOS devices, but let's ignore that for a second)

Answer 1

Device heights and widths in CSS refer to the physical pixels of the screen, not the CSS pixels, as determined by device-pixel-ratio.

So for example, if a phone had a resolution of 700 x 900 and a device-pixel-ratio of 2, the physical pixel width would be 700px, but the CSS pixel width would be 350px. This would mean that width: 350px; and device-width: 700px; would be the exact same size on this screen.

Hope that helps!