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.
you can use the and expression to use multiple rules to the same media query
target any between 998px and 999px
The media queries that worked for me on Chrome on Nexus 7 were:
Following code worked for me to target Nexus7 tab.
Don't forget to add the meta tag in your html. For example,
You should try using a mix of inches for screen sizes and px for density/space
With this you can have a distinct layout for a galaxy nexus AND a nexus 7 without a bunch of lines for resolution!!
Here an article about this: http://ungeekautourdumonde.com/css3-tablette-desktop-mobile-la-guerre-des-media-queries/
Nexus 7 (v1) 2012
Nexus 7 (v2) 2013
To specifically target you can use:
This will get the nexus 7 and if you have iPhone targetting media queries they will remain in tact.