现代浏览器检测工具 Modernizr 用于提供 IE8 媒体查询支持

Question

我正在考虑在IE8中使用Modernizr来支持媒体查询。您能否提供一个实现相同的示例。

我也看过Respond.js，但觉得其CDN内容有点复杂。

如果有其他建议，也请告诉我。

- copenndthagen

Answer 1

如果你想在IE8中使用媒体查询，Respond.js是必需的。这是启用浏览器媒体查询的polyfill。

Modernizr只为媒体查询提供测试。根据文档，在旧版不支持的浏览器中，测试将始终返回false。

另一个选择是由960gs网格系统的创造者Nathan Smith创建的adapt.js。

更新： 根据文档，现在Modernizr正在为旧版IE添加对html5标签的支持。

- Jonathan Liuti

---

非常感谢，我刚看了一下。看起来正是我要找的东西。Adapt.js。如果我理解正确，我只需要在所有需要显示两个不同版本/两个CSS（desktop.css/ipad.css）的页面上包含这个js，并添加var ADAPT_CONFIG = {...}的代码。所以，如果它可以在ie8上显示不同屏幕尺寸的两个不同版本，那么我不需要Respond.js了吗？请确认一下。 - copenndthagen

我可以用adapt.js替换完整的媒体查询语句吗？例如，如果我有3个CSS文件要应用于相同的HTML @不同的屏幕尺寸上，即使浏览器理解媒体查询，如FF4或Safari 5，它也可以与adapt.js无缝配合使用。我没有完全理解adapt.js中回调函数的用法。 - copenndthagen

你应该看一下这个文档：http://sonspring.com/journal/adapt-js-explained#how-to-use，它非常简单。当然，你应该在每个地方都包含最基本的ADAPT_CONFIG脚本。最好的方法是使用条件语句仅在IE版本低于9时加载脚本。然后，你仍然可以为更现代的浏览器使用媒体查询。关于回退，它是可选的，它的作用是在adapt.js完成工作后执行引用的JavaScript函数。尝试将此语句添加为回退：function() {alert('Adapt Loaded');}。享受吧 ;) - Jonathan Liuti

我经过一夜的思考后认为，使用 Modernizr 进行媒体查询测试要比使用条件注释检测是否需要使用 adapt.js 更好。选择 Modernizr 来测试媒体查询浏览器的兼容性! - Jonathan Liuti

Modernizr 还增加了对 HTML5 元素（如 article、section 等）的支持。 - aaandre

现在确实是这样，但写作时（2011年10月）并非如此 ;) - Jonathan Liuti

Answer 2

Modernizr不会为浏览器添加功能，它只是检测浏览器是否支持某些功能，因此允许您的站点确定是否需要使用polyfill hack来实现该功能。因此，您可以使用Modernizr来查找是否需要使用Respond.js。

Modernizr网站确实包括一个页面，列出了他们所知道的所有polyfill hacks，因此，如果您对Respond.js不满意，可以尝试在这里查看可用的替代方案。从页面上看，我看到在“媒体查询”部分列出了一些其他选项，因此您可以尝试它们。

但是，我要说的是，目前似乎只有Respond.js是推荐用于这种情况的脚本。我没有尝试过其他列出的选项，因此无法进行比较，但我可以说，Respond.js之所以能够发挥作用，是有充分的理由的。

Respond.js具有复杂的跨域问题的原因是，它与不理解媒体查询的浏览器一起工作的唯一方法是再次加载整个样式表并使用Javascript处理它。但是，浏览器的安全模型不喜欢您使用远程加载的脚本进行这种操作。

正如我所说，我没有使用任何其他脚本工作过，但我的猜测是它们会遇到类似的问题，因为它们需要以某种方式工作才能使媒体查询在不支持它们的浏览器上运行。

最简单的处理方法就是将respond.js脚本放在与您网站其他部分相同的域中，而不是从另一个域加载它。这完全绕过了任何需要处理CDN问题的需求。

希望这有所帮助。

- Spudley

Answer 3

Internet Explorer 8 不支持媒体查询。即使使用 Modernizr，也无法解决这个问题。Modernizr 并不能为浏览器添加功能。而且，为什么要在 IE8 中添加媒体查询呢？媒体查询是为移动网站设计的，而不是为桌面浏览器设计的。

- Mike Vierwind

---

这完全不正确。并非所有人都使用大型显示器浏览网页。媒体查询的作用是为那些使用不同尺寸显示器（以及移动设备）浏览网页的人提供响应式布局。 - Jason

如果你在编写移动端优先的CSS（例如stuffandnonsense.co.uk/projects/320andup/），那么你希望IE6-8仍然能够看到桌面端样式，因此它需要能够理解CSS媒体查询。 - BeesonBison

一些CSS框架采用移动优先的方法，并需要媒体查询来显示与默认移动视图不同的布局内容。 - aaandre