How to detect if Media Queries are present using Modernizr

Question

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

Answer 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...