Trigger javascript when CSS media queries change.

NOTE:

This has a number of advantages over using window.matchMedia(), namely that you only have to maintain your breakpoints in one place and it fails more gracefully.

UPDATE 1: It turns out that Android JS support for CSS :after is patchy. We've decided to set the font-family property on the <html> element instead, as it's better supported (despite being a bit of a hack).

UPDATE 2: The code now looks at :after first (this makes Opera happy) and then falls back to font-family (setting both is now a requirement). View the CHANGELOG.md for a list of browsers this code has been tested in.

How to use it

CSS:

Define a set of html font-familyand:after strings in your stylesheet that correspond to the media queries you wish to test for:

Adding queries after init():

As well as passing an array of objects when you initialise the plugin, you can add extra callbacks at any time. This is especially handy if you've got multiple JS files across the site that need to test whether a query is true:

In the latest release, you can now have a function execute once across a range of contexts; this is helpful, for instance, if you want to initialise the code once for desktops and tablets, but leverage a custom controller on mobiles: