Enquire.js + Media.match + Respond.js

Question

I'm trying to get Enquire.js working for legacy browsers. I'm using the Deep support method from the docs:

Modernizr.load([
    {
        test: window.matchMedia,
        nope: "media.match.min.js"
    },

    "enquire-2.0.0.min.js",
    "plugins.js", // jquery plugins
    "main.js" // enquire-triggered functions + general code
]);

The problem with this is I am using Modernizr+Respond from initializr.com, so the test always passes. This triggers a JS error in enquire.js in IE8/9.

By removing respond.js and just using plain Modernizr the test fails, Media.match loads, and the JS error is solved. However, I lose my Media Query support in IE8.

What's the best method to get everything working together? I have tried loading respond.js at the same time as Media.match via Modernizr. If I load it first, I see the same JS error as before. If I load it second, media queries don't work. I've also tried just loading that INSTEAD of Media.match, but the JS error returns.

Thanks.

EDIT:

Shortly after posting this I rolled back to enquire 1.5.6, used Respond.js, the shouldDegrade option, and no Modernizr tests. No JS errors in IE8/9, and everything seems to be working fine so far.

I am still interested to know if there's a way to get this working with 2.0, or if I should stick with the 1.5.6 for now?

score 4 · Answer 1 · answered Aug 20 '13 at 19:31

I ran into the same problem with Enquire v2.0.2. My workaround was to remove the inclusion of matchMedia from respond.js, and then load media.match and enquire.js after loading respond.js. I haven't tested this with modernizr yet, but I was able to get media query support and enquire.js to work in IE7 and 8 with no JS errors.

score 1 · Answer 2 · answered Feb 12 '14 at 12:52

I guess the actual problem is that in respond.js you do have the matchMedia polyfill but without the matchMedia.addListener plugin. So the modernizr test for plain matchMedia succeeds but then results in the error you probably get with enquire (Object doesn't support this property or method).

I myself wouln't like to customize respond.js not to include matchMedia but rather just load the matchMedia.addListener plugin separately after respond.js.

score 0 · Answer 3 · edited May 23 '17 at 11:43

0

Tim,

A little late but did you see this yet? I think it's what you are looking for.

enquire.js legacy support

edited May 23 '17 at 11:43

Community

1
1

answered Jun 04 '13 at 01:35

Mark Mitchell

2,157
4
16
15

That's actually the thread that I started following to try fix this problem. I never did, though -- not with enquire 2.0. I always ended up with a JS error in one version of IE or another. I'm getting ready to tackle this on another site soon, so I'll probably give it another shot. – Tim Gieseking Jun 10 '13 at 16:15

Enquire.js + Media.match + Respond.js

3 Answers3