CSS Media Queries on Nexus 7, display resolution not working in code

Question

I'm working with CSS Media Queries to load different templates for differently sized devices. I created a spreadsheet listing the display resolution of testing devices and the most common devices to come up with the size cut-offs. One of the devices that I'm testing is the Nexus 7 of which I've found the display resolution to be 1280 × 800. However when I use these values in my code, it doesn't work.

**the only reason I'm using no max or min is because I'm trying to find the exact resolution. If I replace with max-device-width with something rather large, it works and I've done enough testing to know that it works with various max values given but in order to properly complete my code to differentiate between 3 differently-sized device categories, I have to make sure I'm creating the right cut-offs. Is CSS resolution different? Thanks for any and all help in advance!

@media only screen and (device-width:1280px) and (orientation:landscape) {
/*style --code removed for sack of space */
} 

@media only screen and (device-width:800px) and (orientation:portrait) {

/*style --code removed for sack of space */

}    

Here is my viewport code in my html file

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Answer 1

There is a difference between screen dimensions in CSS pixels and device pixels.

In the case of the nexus 7, the native device pixels are 1280 x 800 pixels.

However, if this was the reported width for media queries we'd end up with responsive designs being triggered for traditional desktop sizes.

As a result, many browsers settle on a CSS pixel size that more closely resembles the size of traditional pixels before high pixel density displays. Pretty much iPhone 1 - 3 pixel size.

The device-pixel-ratio reports (device pixels / CSS pixels)

e.g. 800 / 600 = 1.3333

To add even more confusion, these ratios sometimes change across OS releases. For example, as of Jelly Bean 4.2 my nexus 7 reports a width of 600px in portrait, down from 603.

This makes it difficult to target exact devices with width based media queries. I recommend accepting that you're designing for a huge number of device widths and attempt to create a responsive design that adapts between the range of device sizes that you choose to support.

Best of luck :)

Answer 2

Use the following viewport code:

<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />

or this for not allowing scaling:

<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no" />

The weird part about the Nexus 7 is that (as jpgr posted) it doesn't allow you to use the 1280/800 space that it boasts (out of the box at least). It is almost as if it is running zoomed in to some degree despite scaling preferences being set.

I notice this issue when my graphics seems slightly blurry. I tested the window size via javascript and it was posting numbers about 25% lower then expected. You will notice I have exclude the scaling parameters as it seems to ignore them for the most part.

The real key is using the target-densitydpi = device-dpi... This seems to make very right as rain.

Love working with the Nexus 7 for sure!!!

Answer 3

Overly pragmatic answer, but you can basically use the screen size of 601x880 to target the Nexus 7. Not technically complete, but should be enough to get you started if you are trying to use breakpoints in your media queries.