This normalizes the behavior of media queries across the major browsers.
It is needed because WebKit-based browsers don't include the scroll-bar when calculating min-/max-width values used in media queries. See this comment on SO.
Funny thing about that SO question: Opera, Firefox, and IE are doing the right thing (following the W3-spec). But I must say that I kind of prefer WebKit's solution since, for example, a div with a specified width of 400px will fit nicely into this media query:
body { margin: 0; }
div#demo { width: 200px; height: 200px; background-color: red; }
@media (min-width: 400px) {
div#demo { width: 400px; height: 400px; }
}
This makes the width of the div exactly the same as the browser window at 400 pixels in WebKit-based browsers. In other browsers this would make a horizontal scroll-bar.
With the fixed version, the media query needs to look like this (tested in Chrome, Firefox, Opera, and IE9):
@media (min-width: 416px) {...}
Which means for "pixel-perfect" responsive designs, those 16 pixels needs to be taken into consideration. For more fluid layouts, this might not be an issue.
A caveat about this is that you need to be careful of how the scroll-bars behave (for example, elements that are position: fixed; may overlap the scroll-bars).
Since I'm using "infinite scrolling" on a page while using this technique, I needed a different approach to detect when calculating if the page is a the bottom.