9

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">
Improve this question
3
  • I know there are some devices that where the 'width' and the 'orientation' don't always pair in a way that makes sense. Have you tried targeting @media only screen and (device-width:1280px) and (orientation:portrait) ? Commented Aug 21, 2012 at 18:50
  • Thanks for the reply. I discovered through trial and error that device-width and device-height are 966px and 909px, respectively. Commented Aug 21, 2012 at 23:36
  • Yeah, it's a high-DPI device so the pixels are scaled to maintain readability. On my nexus 7 I see 962px by 553px with the status bar hidden and the system bar enabled. Commented Sep 6, 2012 at 3:27

3 Answers 3

Reset to default
13

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 :)

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

3

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!!!

Improve this answer

4 Comments

Image
Just a note - target-densitydpi=device-dpi can really mess with 4 inch 960px screens unfortunately. You can check for the device with javascript and dynamically update your viewport content with that tag, but that's kind of a pain.
Image
I'm having this same problem. I'm confused though, do these viewport settings fix the problem?
Image
The viewport meta code above allows the known values of 1280x800 (as the device is advertised) to be utilized in the browser. Without this viewport code you get a screen size closer to 966px and 909px as jpgr stated. Robbo mentioned this can cause issues with other devices and I am only speaking to the Nexus 7. Pixels are not displayed 1:1 so graphics may become a bit fuzzy. Just keep in mind for media queries you have to use the values that are actually being displayed in the browser and not what is advertised on the device.
Image
To add, target-densitydpi is no longer supporteed on Chrome for Android
2

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.

Improve this answer

1 Comment

Image
Using: (min-device-width : 601px) and (max-device-width : 880px) worked for me thanks!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.