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?

Answer 1

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?