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.
The media query has fired