Media Queries failing on Android browser

Question

I am trying to develop a web app which applies an appropriate style sheet depending on the device (and its orientation).

I have 5 media queries in total:

//for mobile phones in portrait mode
<link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)" href="css/mobile-portrait.css">

//for mobile phones in landscape mode
<link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:landscape)" href="css/mobile-landscape.css">

//for tablets (iPad) in portrait mode
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="css/tablet-portrait.css">

//for tablets (iPad) in landscape mode
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="css/tablet-landscape.css">

//for desktop computers
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="css/desktop.css">

Everything works on the Desktop, iPad and the iPhone (in both browser and web app versions) but the landscape media query fails on Android's browser? Any ideas? Have I got the 'max-device-width' wrong?

Web devices often don't report what you expect them to and so don't react to Media Queries the way you think they do. Perhaps it would be useful to point your test browsers at ckollars.org/dimensions-no-meta-viewport.html and ckollars.org/dimensions-meta-viewport.html and see what they say. — Chuck Kollars

Bryant Bryant · Accepted Answer · 2011-07-18T23:36:24

That's because most newer android phones are something like 480 wide by 800 tall depending on device, so the way you have yours written, Android Landscape should be picked up by the tablet landscape css. But I think I ran into a similar issue with Android not picking up the stylesheet, so I added this and everything seemed to work...

<meta name="viewport" content="width=device-width">

Do you have this in your head above your stylesheet links?

Media Queries failing on Android browser

2 Answers