title: Firefox, Windows DPI scaling and CSS max-width media query
body: <p>I have a website where a media query decides whether to show the right-hand column, depending on browser width. CSS looks like this:</p>
  
  <pre><code>@media only screen and (max-width: 1152px) {
      #column_right {display:none}
  }
  </code></pre>
  
  <p>Recently, I was testing this on a Windows box where the DPI scaling is set to 125%. The resolution of the monitor is set to 1024x768. So in theory, because there are only 1024 CSS pixels available, I assume this would match the media query. </p>
  
  <p>However, this is not the behavior that occurs! It seems that the media query looks not at the CSS pixels, but at device pixels, of which there are 1280 (1024 x 125%). This occurs only in Firefox so far, because Firefox uses the device pixel ratio set by Windows, while all the other browsers (including, bizarrely, Internet Explorer) use a default device pixel ratio of 1.0. I say that this is bizarre of IE because if there is one browser that should respect Windows settings, it is IE.</p>
  
  <p>Anyway, why is it this way, and how would I work around it? </p>