title: Media queries work on device but not on browser resize
body: <p>I seem to have opposite problem to many other people when it comes to using media queries:
  I cannot seem to make the different queries kick in when I'm resizing the browser. But when I access the webpage on my iphone it works fine.</p>
  
  <p><a href="http://dknytkom.dk/forside/" rel="nofollow noreferrer">http://dknytkom.dk/forside/</a></p>
  
  <p>I tested it by adding a background-color to my main container but the color change only occurs on the actual iPhone - not the browser itself.
  For instance I've written:</p>
  
  <p>At the top of my grid2.ccs I've set the bg-color of the main container to blue. Further down I write: </p>
  
  <pre><code>@media only screen (min-width : 768px) and (max-width : 1254px) {
        body, #main-container { background-color:pink;}
  }
  </code></pre>
  
  <p>and further down again:</p>
  
  <pre><code>@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {body, #main-container { background-color:yellow;}
  </code></pre>
  
  <p>The color change does occur – but only my device (iPhone) and not on browser resize.</p>
  
  <p>NOTE: Perhaps this thread is on to something:
   <a href="https://stackoverflow.com/questions/13029905/media-queries-mobile-vs-desktop-browser?rq=1">Media Queries - Mobile vs Desktop Browser</a></p>
  
  <p>"If I use max-device-width instead of max-width it becomes responsive on mobile browsers, but not desktop browsers..."</p>