title: Media Queries failing on Android browser
body: <p>I am trying to develop a web app which applies an appropriate style sheet depending on the device (and its orientation).</p>
  
  <p>I have 5 media queries in total:</p>
  
  <pre><code>//for mobile phones in portrait mode
  &lt;link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)" href="css/mobile-portrait.css"&gt;
  
  //for mobile phones in landscape mode
  &lt;link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:landscape)" href="css/mobile-landscape.css"&gt;
  
  //for tablets (iPad) in portrait mode
  &lt;link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="css/tablet-portrait.css"&gt;
  
  //for tablets (iPad) in landscape mode
  &lt;link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="css/tablet-landscape.css"&gt;
  
  //for desktop computers
  &lt;link rel="stylesheet" media="all and (min-device-width: 1025px)" href="css/desktop.css"&gt;  
  </code></pre>
  
  <p>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? </p>