Nexus 7 screen.width returns 800 but media query max-width: 720px still applies

Question

I have a Google Nexus 7 tablet I'm using for testing some responsive designs. In Javascript, the screen.width returns as 800px, as expected (the native resolution).

How come the following media query is picked up by the tablet when the max width of the screen is > 720px?

@media only screen and (max-width: 720px) and (orientation: portrait) {
    .test{ background: red;}
}

Solution

Android does target density scaling in order to accommodate the varying screen densities of the Android ecosystem. The Android browser targets a medium screen density by default, trying to emulate the size of elements as if the screen was an MDPI screen.

Using this website, you can see that the result of this scaling is that device-width is 601 px and device-height is 880 px on the Nexus 7. Therefore, it falls within your max-width: 720px declaration and the background appears red.

window.screen.width and .height always returns the actual screen size. You have to remember that the Viewport Size and the Screen Size are two different things altogether.

If you do not want this behavior, you may add target-densitydpi=device-dpi to your <meta name="viewport"> tag. This will disable the Android target density scaling: device-width and device-height will report the native screen resolution of the device.

More information about Android's target density scaling is available in the Android Developers' Documentation.

Comments

[Jake Wilson]

I'm a big confused on the nomenclature here... In the response.js site above, it lists the JavaScript attributes of viewport width, device width and document width. In css, is the device-width media query looking at the JavaScript-equivalent of viewport width? Why aren't they called the same thing?

[Volker E.]

Support for target-densitydpi was removed from Webkit, see trac.webkit.org/changeset/119527 and an explanation here: petelepage.com/blog/2013/02/…

[Andrew Moore]

@VolkerE.: New versions (4.4+) of Android are no longer using Webkit. Switched over to Google's Webkit fork: Blink. target-densitydpi is still supported on all Android devices now and for the future. Older versions of Android (4.3 and lower) are using an older version of Webkit with target-densitydpi still available.