title: Mobile orientation change not applying CSS
body: <p>I'm testing a website I'm developing and am using media queries.</p>
  
  <p>When I test and resize the page in a browser, everything is good.</p>
  
  <p>But when I test on my mobile device, I encounter a problem when I change the orientation of the phone.</p>
  
  <p>If I load the page in <code>landscape</code> mode, the correct CSS are applied.</p>
  
  <p>When I change to <code>portrait</code>, the CSS are also correct.</p>
  
  <p>But if I go back to <code>landscape</code>, the <code>portrait</code> css classes are still being applied.</p>
  
  <p>I'm using these metatags  </p>
  
  <pre><code>&lt;meta name="MobileOptimized" content="320"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"&gt;
  </code></pre>
  
  <p>And in my media queries I have</p>
  
  <pre><code>@media 
  only screen and (max-width: 610px),
  only screen and (max-width: 610px) and (orientation:landscape) { ... }
  
  @media
  only screen and (min-device-width: 240px) and (max-device-width: 520px),
  only screen and (min-width: 240px) and (max-width: 520px) { ... } 
  </code></pre>
  
  <p>I've alerted the device width to make sure it's ok and in <code>landscape</code> mode it's <code>598px</code> wide and <code>portrait</code> is <code>384px</code></p>
  
  <p>I'm using a Nexus 4 (Android 4.3)</p>
  
  <p>How come the CSS aren't applied once I change back the orientation?</p>
  
  <p><strong>EDIT:</strong>
  If I load the site in <code>portrait</code> and then change to <code>landscape</code>, the CSS aren't applied.
  It's as if once it goes to the smallest resolution, it can't go back.</p>