I am faced with the challenge of testing site design on two different devices: Samsung Galaxy Nexus and Asus Nexus 7 tablet. I am struggling to target these devices individually using media queries, as I am unsure about the appropriate values for max-width or max-device-width. Additionally, I am confused about the order in which to place the media queries in my code...
As per the information provided at:
- 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
The specific targets I need to focus on are:
- Galaxy Nexus Portrait and Tablet
- Galaxy Nexus Portrait
- Galaxy Nexus Tablet
- Nexus 7 Portrait and Tablet
- Nexus 7 Portrait
- Nexus 7 Tablet
I made attempts to test the following configurations but did not achieve satisfactory results... It seems like I was randomly adjusting numbers in an attempt to find a solution...
/* 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; }
}
It is acknowledged that targeting individual devices goes against the principles of Responsive Design. However, this is being done purely for testing purposes and needs to be addressed in this particular case. Any assistance on this matter would be greatly appreciated.