media-queries - 如何使用Modernizr检测是否存在媒体查询

Question

我正在尝试使用Modernizr 2检测是否存在媒体查询，然后在适当的情况下加载response.js。

我把它放在我的script.js文件中...

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

我究竟做错了什么？我真的很惊讶，在Modernizr网站上没有使用媒体查询来执行此操作的示例。这是我正在使用的Modernizr的版本...

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

Answer 1

这是因为!!Modernizr.mq === true一直在...您正在测试错误的内容！

根据docs：


如果浏览器根本不支持媒体查询（例如oldIE），则mq（）将始终返回false。


但这：Modernizr.mq()也是false！您必须实际测试某些东西。在这里，all关键字正是您需要的（或Paul建议的only all）：

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

但是，所有带有 mq的Modernizr 2.0.x的自定义版本都包含 respond.js，因此，除非您要加载另一个polyfill，否则您实际上不需要进行测试。在这种情况下，您将需要从构建中禁用/删除response.js。

Modernizr 2.5.x

随着Modernizr 2.5.x的到来，以上不再是正确的。 abbreviated changelog指定：


我们不再在构建器中包含Respond.js，因为它在IE8中造成崩溃冲突。如果您的项目中仍然需要Respond.js，则只需手动添加即可。


这意味着 Modernizr.mq('only all')现在可能会返回 false ...