How to detect if Media Queries are present using M

问题:

I'm trying to detect whether media queries are present using Modernizr 2, then loading in respond.js if appropriate.

I've put this in my script.js file...

Modernizr.load({
  test: Modernizr.mq,
  yep : '',
  nope: 'mylibs/respond.js'
});

What am I doing wrong? I'm really surprised there isn't an example of how to do this with Media Queries on the Modernizr site. Here is the version of Modernizr I'm using...

http://www.modernizr.com/download/#-backgroundsize-borderradius-boxshadow-iepp-respond-mq-cssclasses-teststyles-testprop-testallprops-prefixes-domprefixes-load

回答1:

That's because !!Modernizr.mq === true at all times... you're testing for the wrong thing!

As per the docs:

If a browser does not support media queries at all (eg. oldIE) the mq() will always return false.

But this: Modernizr.mq() is false too! You have to actually test for something. Here, the all keyword is just what you need (or only all as Paul suggests):

Modernizr.load({
  test: Modernizr.mq('only all'),
  nope: 'polyfill.js'
});

However, all custom builds of Modernizr 2.0.x with mq include respond.js, so you never really need to test this, except if you want to load another polyfill instead. In that case, you will need to disable/remove respond.js from your build.

Modernizr 2.5.x

With the arrival of Modernizr 2.5.x, the above is no longer true. The abbreviated changelog specifies that:

We no longer include Respond.js in the builder because it was creating crashing conflicts in IE8. If you still require Respond.js in your project, just include it manually.

This means Modernizr.mq('only all') may now return false...

回答2:

Just noticed this conclusion is reached in the comments of Felix's answer - I'm leaving my answer here in case it helps other visitors who, like me, did not get it.

Not sure if this is still an issue but if you are loading Modernizr v2.0.6 you shouldn't need to run this test. Just adding it to your page should automatically fire-up respond.js and your media queries should start working.

I've been scratching my head over this as well since I kept getting "true" returned in IE8!! Poorly explained on the Modernizr site but alluded to in the http://html5boilerplate.com/ (first instance)