如何使用 Modernizr 检测是否存在媒体查询答案

【问题标题】：How to detect if Media Queries are present using Modernizr如何使用 Modernizr 检测是否存在媒体查询
【发布时间】：2011-09-18 09:42:26
【问题描述】：

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

我已将其放入我的 script.js 文件中...

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

我做错了什么？我真的很惊讶在 Modernizr 网站上没有一个如何使用媒体查询的示例。这是我正在使用的 Modernizr 版本...

【问题讨论】：

【解决方案1】：

那是因为!!Modernizr.mq === true 始终...你在测试错误的东西！

根据docs：

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

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

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

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

随着 Modernizr 2.5.x 的到来，上述情况不再成立。 abbreviated changelog 指定：

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

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

【讨论】：

【解决方案2】：

刚刚注意到在 Felix 的答案的 cmets 中得出了这个结论 -我将我的答案留在这里，以防它帮助像我一样没有得到它的其他访问者。

不确定这是否仍然是一个问题，但如果您正在加载 Modernizr v2.0.6，则不需要运行此测试。只需将其添加到您的页面应该会自动启动 respond.js 并且您的媒体查询应该开始工作。

自从我在 IE8 中不断返回“true”以来，我也一直在为此摸不着头脑！在 Modernizr 网站上解释得不好，但在 http://html5boilerplate.com/ 中提到（一审）

【讨论】：