A Code Example by FourFront
This is a demonstration of the difference between CSS media queries based on max-width and jQuery's $(window).width() measurement, due to the inconsistent ways in which web browsers handle vertical scrollbars in media queries. Back to the full post here »
There are two messages set to display in the box below. One with a media query at max-width: 800px, and the other using a jQuery $(window).width() measurement at less than or equal to 800px. Dragging your browser to 800px or less will display each message in the div below. Note, I do not have a media query polyfill in place for older browsers on this page.
Due to the inconsistent ways in which browser media queries handle scrollbars, we do not see the same result in all browsers.
In the latest versions of Chrome and Safari, the message are revealed at the same time.
In that latest versions of Firefox, Opera, and IE9, the javascript message is shown roughly 10 to 20 pixels before the media query.
Drag your browser to 800px to see when the media query and javascript events fire.
The media query has fired
The Javascript has fired