I’ve spend the day doing battle with CSS3 Media Queries determining a Galaxy Nexus from a Nexus 7 and I’ve finished the day winning!
I’ve been doing some consulting for a client on a project that uses PhoneGap and jQuery Mobile along with a little bit of Ajax to scrape data from the client’s production site. Nice little project and we’ve managed to support Android, Blackberry & WinPhone with a single set of assets.
The only trouble came when we encountered the new Galaxy Nexus and Nexus 7 handsets. The resolution of these handsets is just amazing. The designer had separate layouts for “tablet” interactions and “phone” interactions, so it wasn’t just a matter of looking at the device-width and seeing what res we had.
The old queries relied on catching smartphone using such a device-width mechanism:
@media only screen and (max-device-width: 569px)
But that’s not nearly enough these days if you’re walking that road. The max-device-width on the Galaxy Nexus is something like 1184 which puts it into tablet territory! I’ve been doing a bunch of testing using ResponseJS’s awesome tester site but was feeling a bit all-at-sea on how to cope with layout given the resolutions.
If you’re not up to speed with this stuff it’s worth have a read of The Complete Idiot’s Guide to Pixels on Mobiles, which finally explained to me the different between max-width and max-device-width.
The upshot is that, for now, I’m moving to:
@media only screen and (max-width:600px)
As my current catcher for Android Smartphones (and avoiding the tablets). After Android’s target density scaling, I think the Galaxy Nexus presents with a 360 x 519 which is explained nicely in this amazing article on Nexus CSS deets (Compared with 601 x 880 on the Nexus 7) so I’ve got plenty of breathing space for a while.
Good times… My media queries are firing and the app is layout out beautifully… For now… ;-)