title: CSS Media Queries not changing on device rotation
body: <p>If I use <strong>max-device-width</strong> for my media queries, when I rotate my tablet/phone the css within the media queries doesn't take effect, if I refresh the page, then the correct styles are applied.</p>
  
  <p>If I change the media query to <strong>max-width</strong> then everything works fine on the tablet/phone but I get to see the whole responsive process on the desktop, which I don't want.</p>
  
  <p>Im using the following meta tag:</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"&gt;
  </code></pre>
  
  <p>And my media queries are:</p>
  
  <pre><code>@media screen and (max-width:800px)
  {
  }
  etc......
  </code></pre>
  
  <p>I've tried the following:</p>
  
  <ul>
  <li>Adjusting the values, 799px to 801px</li>
  <li>Stacking max-width, followed by max-device-width</li>
  <li>Changing the meta tag to only include device width</li>
  </ul>
  
  <p>Nothing seems to work apart from max-width</p>
  
  <p>How can I get the media queries to take effect without showing the responsive process on the desktop?</p>
  
  <p>Cheers</p>