Как определить, имеются ли медиа-запросы с помощью Modernizr

Я пытаюсь определить, существуют ли медиа-запросы, используя Modernizr 2, а затем загружать в response.js, если это необходимо.

Я поместил это в свой script.js файл...

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

Что я делаю неправильно? Я действительно удивлен, что нет примера, как это сделать с помощью Media Queries на сайте Modernizr. Вот версия Modernizr, которую я использую...

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

Ответ 1

Это потому, что !!Modernizr.mq === true в любое время... вы тестируете не то, что нужно!

В соответствии с docs:

Если браузер не поддерживает медиа-запросы вообще (например, oldIE), mq() всегда возвращает false.

Но это: Modernizr.mq() тоже false! Вы должны фактически что-то проверить. Здесь ключевое слово all - это именно то, что вам нужно (или only all, как предлагает Павел):

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

Однако все пользовательские сборки Modernizr 2.0.x с mq включают response.js, поэтому вы никогда не нужно проверять это, за исключением случаев, когда вы хотите загрузить еще один polyfill. В этом случае вам нужно будет отключить/удалить response.js из вашей сборки.

Modernizr 2.5.x

С приходом Modernizr 2.5.x вышеизложенное перестает быть верным. Сокращенный заголовок указывает, что:

Мы больше не включаем Respond.js в построитель, потому что это создавало конфликты в IE8. Если вы все еще требуете Respond.js в своем проекте, просто включите его вручную.

Это означает, что Modernizr.mq('only all') теперь может возвращать false...

Ответ 2

Просто заметил, что этот вывод сделан в комментариях к Felix answer. Я оставляю свой ответ здесь, если он помогает другим посетителям, которые, как и я, не получили его.

Не уверен, что это все еще проблема, но если вы загружаете Modernizr v2.0.6, вам не нужно запускать этот тест. Просто добавив его на свою страницу, вы должны автоматически запустить response.js, и ваши медиа-запросы должны начать работать.

Я тоже почесал голову над этим, так как я продолжал получать "true", возвращенный в IE8!! Плохо объяснено на сайте Modernizr, но упоминается в http://html5boilerplate.com/ (первый экземпляр)