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.

Comments

  1. User Avatar

    It’s nice that Digby keeps you company while you record your screencasts (I’m assuming that’s her dog tags jingling in the background). My dog used to sleep under my desk while I worked. Great work companions.

Leave a Reply

Your email address will not be published. Required fields are marked *

icon-link icon-logo-star icon-search icon-star