Firing Responsive jQuery Functions based on CSS Media Queries Rather than Window Width

Updated: May 07, 2015

There are some great options for managing Javascript when using CSS media queries in a responsive website. MediaCheck, jRespond, and Breakpoints.js all allow you to fire javascript functions based on customizable breakpoints in browser width. However, recently I was working on a small site with only a single function to be called at a smaller browser size, in conjunction with a media query, and thought I’d forgo one of these scripts and manage my change using a jQuery window width measurement.

The Problem: jQuery $(window).width() and CSS3 Media Queries do not always match.

Initially I was using the below code:

$(window).resize(function(){
	if ($(window).width() <= 800){	
		// do something here
	}	
});

When viewing the site in Firefox, I noticed a small difference in the width at which my media query and javascript were firing. Roger Johansson recently wrote up a great article documenting the inconsistent treatment of vertical scrollbars in media query widths. This inconsistency causes a small difference between browsers in the actual window width when a media query fires, which in turn causes media query and jQuery width measurements to not match in some popular browsers: Firefox, IE, and Opera. Here is a code example showing the difference between the jQuery window width and the media query width measurement.

The solution: use jQuery to test for a changed CSS property, rather than the browser width

Rather than the measuring the screen width on resize of the window, I check for a css rule that is changed by the media query. This way, regardless of the how the browser treats the scrollbar, the media query will fire at the same time.

Suppose the “sampleClass” class has a float:left rule before the media query, and a float:none rule after, on window resize I check for the change in that rule. We also need to test the css class on initial load of the page.

The jQuery

$(document).ready(function() {
    // run test on initial page load
    checkSize();

    // run test on resize of the window
    $(window).resize(checkSize);
});

//Function to the css rule
function checkSize(){
    if ($(".sampleClass").css("float") == "none" ){
        // your code here
    }
}

The CSS

.sampleClass {float:left;}
@media only screen and (max-width: 800px){
	.sampleClass {float:none;}
}