OK, so I use Respond.js a polyfill for mediaqueries on legacy browsers (ie8 being the most important).
At the same time I'm investigating in using Enquire.js which enables executing js-code based on media-query matches.
Tested in isolation this stuff works:
However the combi doesn't seem to work. I.e:
Enquire.js doesn't execute javascript based on a media-query which gets enabled through respond.js (for legacy browsers)
Since Respond.js contains Paul Irish's polyfill for MatchMedia which (as per: Enquire's documentation) should be enough for legacy support, I'm not sure what could be wrong.
So just to be checking: this combination should work right?
I'm the author of enquire, so i'll help where i can.
I've just browsed through the respond.js source to find out how it works. Respond extracts any media queries from your CSS, then depending on the width of the window it will create new style blocks containing that CSS if the media query matches (this is why it only supports simple media queries such as max/min-width). This of course means that it will not help enquire JS, as it is simulating media queries.
The inclusion of the matchMedia
polyfill is actually a red herring. All that does is create an equivalent to the matchMedia
browser API. Thus if the browser only supports very limited set of media queries (as IE8 does), it will not expand it's capabilities, it will only allow you to work within it's means. I made this mistake myself at first!
I don't know if this will help you, but enquire's register
method can accept a third parameter, shouldDegrade
which is a signal to enquire that you intend the functionality to always run if the browser is deemed incapable. Thus if you pass in true
, the match function will always be executed for incapable desktop browsers (whilst still being conditional for capable browsers). This will allow you to deliver a desktop experience to older browsers, especially useful in mobile-first approaches.
Happy to help further if you have any more questions