title: How to Force All Browsers to Measure Viewport Width Consistently for Media Queries
body: <p>Apparently Chrome does not include the scrollbar width (~17px) when evaluating media queries.</p>
  
  <p>IE, Firefox and Opera do count the scrollbar width as part of the viewport.</p>
  
  <p>For example, assume a viewport width of 500px and a scrollbar of 17px.</p>
  
  <p>The below code:</p>
  
  <pre><code>@media (min-width: 500) {
  
      //code
  
  }
  </code></pre>
  
  <p>will execute in <strong>Chrome</strong> at a <strong>viewport width of greater than or equal to 500px</strong>.</p>
  
  <p>However, <strong>IE9, Firefox &amp; Opera</strong> will execute that code at a <strong>viewport width of greather than or equal to 483px</strong>.</p>
  
  <p>My Question: <strong>Is there a way to force all browsers to either include or exclude the scrollbar width to/from the viewport width when executing media queries?</strong></p>