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; }
}

/*
css responsive-design mobile-website media-queries
Edit
Report