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

Doublebank

By the way, I'm loading Modernizr before my script.js just in case anyone is wondering. – Doublebank

You don't need the empty yep. – Amberjack

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

Albina

Thanks Felix, I'll give this a try tonight. – Doublebank

'only all' is slightly better. I'd recommend that. – Sultry

Gah, still can't get this to work guys :-( <!-- All JavaScript at the bottom for fast page loading, except for Modernizr which enables HTML5 elements & feature detects --> <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/libs/modernizr-2.0.6.min.js"> </script> <script type="text/javascript"> Modernizr.load({ test: Modernizr.mq('only all'), nope: 'js/polyfills/respond.js' }); </script> – Doublebank

still don't understand how to format code in these comments 'code' test? – Doublebank

Doesn't Modernizr include respond.js anyway? So you wouldn't need to load it up? For the comments, you have to use `backticks`. – Amberjack

Hmmm does Modernizr 'conditionally' load respond.js though, or just include it anyway? – Doublebank

@Doublebank Modernizr.mq('only all') being true tells you that the current page supports the .mq() method and that it meets 'only all'. It does not tell you if the current page natively supports media queries. Just use a Modernizr build that includes respond.js – Disqualification

@Disqualification All custom builds with mq include respond.js, except if you explicitly disable it. – Amberjack

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

Merrick

+1 Right, I thought it was pretty clear... but then again, that was after reading Modernizr's source. Reading source is good. – Amberjack