MQ:
Without mqGenie
WebKit browsers are the only browsers that don't include the scrollbar in the viewport. While this is technically incorrect, it makes sense as mobile devices don't have scrollbars.
My plugin, mqGenie, forces overflow-y on <html>, detects whether the browser is not WebKit based & and then increases all of the media queries by the width of the scrollbar so that they fire at the right size.
My other plugin, Viewport Genie, shows the real viewport width, minus the scrollbars. If you view this demo in Firefox's Responsive Design View, you'll clearly see the media queries being triggered at the “correct” width.
It also exposes some objects (mqGenie.adjusted, mqGenie.width, mqGenie.fontSize) and a function, mqAdjust so you can recalculate any media queries that you may have in JavaScript.
The #content element and the console update accordingly showing which media queries are being matched.
These are the original media queries to match: (max-width: 19.9375em), (min-width: 20em), (min-width: 500px), (min-width: 750px), (min-width: 50.5625em), (min-width: 900px) and (max-width: 950px)