How to target Galaxy Nexus and Nexus 7 with media queries?

Question

I have two devices that I'm testing site design with. Samsung Galaxy Nexus and Asus Nexus 7 tablet. I'm having a really hard time figuring out how to target these individual devices with media queries. I'm not sure about what values to use for max-width or to use max-device-width. Also I can't figure out what order to put the media queries in...

According to: http://responsejs.com/labs/dimensions/

• Galaxy Nexus Portrait: document.documentElement.clientWidth = 360
• Galaxy Nexus Landscape: document.documentElement.clientWidth = 598
• Nexus 7 Portrait: document.documentElement.clientWidth = 603
• Nexus 7 Landscape: document.documentElement.clientWidth = 966

I need to target the following:

• Galaxy Nexus Portrait and Tablet
• Galaxy Nexus Portrait
• Galaxy Nexus Tablet
• Nexus 7 Portrait and Tablet
• Nexus 7 Portrait
• Nexus 7 Tablet

I tried the following for testing but didn't have good results... Not sure what I'm doing wrong. I was kinda just playing around with the numbers trying to figure out what worked and what didn't...

/* Galaxy Nexus (portrait and landscape) ----------- */
@media only screen and (min-device-width : 360px) and (max-device-width : 598px) {
    ul.top-menu { background: red; }
}

/* Galaxy Nexus (landscape) ----------- */
@media only screen and (min-width : 361px) and (orientation: landscape){
    ul.top-menu { background: blue; }
}

/* Galaxy Nexus (portrait) ----------- */
@media only screen and (max-width : 360px) and (orientation: portrait) {
    ul.top-menu { background: purple; }
}

/* Nexus 7 (portrait and landscape) ----------- */
@media only screen and (min-device-width : 603px) and (max-device-width : 966px) {
    ul.top-menu { background: yellow; }
}

/* Nexus 7 (landscape) ----------- */
@media only screen and (min-width : 604px) and (orientation: landscape) {
    ul.top-menu { background: green; }
}

/* Nexus 7 (portrait) ----------- */
@media only screen and (max-width : 603px) and (orientation: portrait) {
    ul.top-menu { background: orange; }
}

And FYI I know that you aren't really supposed to be so specific, targeting individual devices when doing Responsive Design, but I'm doing this mostly for as a test and need to do it in this case. Any help would be appreciated.

Answer 1

I have a Nexus 7 and I have try your sricpt. The problem is that every browser have a different viewport. So it's complex to have a correct result.

@media only screen and (device-width : 800px) and (orientation: portrait) {
    #device:after {
        content: "Nexus 7 - portrait - firefox";
    }
}
@media only screen and (width : 603px) and (orientation: portrait) {
    #device:after {
        content: "Nexus 7 - portrait - chrome";
    }
}
@media only screen and (device-width : 1280px) and (orientation: landscape) {
    #device:after {
        content: "Nexus 7 - landscape - firefox";
    }
}
@media only screen and (width : 966px) and (orientation: landscape) {
    #device:after {
        content: "Nexus 7 - landscape - chrome";
    }
}

I don't have time to make Opera.

You can view the result here with your Nexus 7