#033 – Media Queries in JavaScript

(Updated on )

As we were desktop-izing the site, we moved the homepage navigation over to the right side of the page to open up a hole on the left side for more content. We’d like to add this content only when the screen is large enough. Not just load it all the time and hide it on mobile. That wouldn’t be very mobile-first thinking, would it?

We essentially need to test the windows width, then if it is wide enough, ajax in some content. How to we find out the windows width? We look at a whole bunch of ways. We measure it straight up. We use matchMedia() to test a media query. We end up using a little library called Enquire.js to give us media query callback functions.