title: Media queries not behaving as expected on Android
body: <p>I have 4 media queries. The 1st, 3rd and 4th work, but the 2nd one doesn't seem to activate.</p>
  
  <p>Why is the 480x720 (second media query) defaulting to the first media query?</p>
  
  <pre><code>@media screen and (max-width: 320px) and (orientation: portrait) { body{background:#F0F;} }
  @media screen and (min-width: 321px) and (max-width: 480px) and (orientation: portrait) { body{background:#F00;} }
  @media screen and (max-width: 480px) and (orientation: landscape) { body{background:#0F0;} }
  @media screen and (min-width: 481px) and (max-width: 800px) and (orientation: landscape) { body{background:#FF0;} }
  </code></pre>
  
  <p><strong>What is expected:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/9Wo59.png" alt="1st Media Query CSS Output">
  <img src="https://i.stack.imgur.com/FCGoE.png" alt="2nd Media Query CSS Output">
  <img src="https://i.stack.imgur.com/dHRqI.png" alt="3rd Media Query CSS Output">
  <img src="https://i.stack.imgur.com/TJ0mc.png" alt="4th Media Query CSS Output"></p>
  
  <p><strong>What is actually happening:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/MmvXQ.png" alt="2nd Media Query fails">
  <img src="https://i.stack.imgur.com/9Wo59.png" alt="1st Media Query passes">
  <img src="https://i.stack.imgur.com/dHRqI.png" alt="3rd Media Query passes">
  <img src="https://i.stack.imgur.com/TJ0mc.png" alt="4th media query passes"></p>
  
  <p>Why is the 480x720 (second media query) defaulting to the first media query?</p>