2

好的，所以我使用Respond.js作为旧版浏览器上的媒体查询的 polyfill（ie8 是最重要的）。

同时，我正在研究使用Enquire.js，它可以根据媒体查询匹配执行 js 代码。

单独测试这些东西有效：

  • respond.js 为 IE8 正确执行 css 中定义的媒体查询
  • enquire.js 根据匹配 css 的媒体查询正确执行 javascript 代码。（对于非旧版浏览器）

但是组合似乎不起作用。IE：

Enquire.js 不会基于通过 respond.js 启用的媒体查询执行 javascript（对于旧版浏览器）

由于 Respond.js 包含 Paul Irish 的MatchMedia 填充物（根据： Enquire 's documentation）应该足以支持旧版支持，我不确定可能出了什么问题。

所以只是为了检查：这种组合应该有效吗？

4

3 回答 3

5

我是 enquire 的作者，所以我会尽我所能提供帮助。

我刚刚浏览了 response.js 源代码以了解它是如何工作的。Respond 从您的 CSS 中提取任何媒体查询，然后根据窗口的宽度，如果媒体查询匹配，它将创建包含该 CSS 的新样式块（这就是为什么它只支持简单的媒体查询，例如 max/min-width）。这当然意味着它不会帮助查询 JS，因为它正在模拟媒体查询。

polyfill的包含matchMedia实际上是一个红鲱鱼。所做的只是创建一个与matchMedia浏览器 API 等效的东西。因此，如果浏览器只支持非常有限的媒体查询集（如 IE8 那样），它不会扩展它的功能，它只会允许你在它的范围内工作。我自己一开始就犯了这个错误！

我不知道这是否对您有帮助，但 enquire 的register方法可以接受第三个参数，shouldDegrade这是一个信号，询问您是否打算在浏览器被认为无法运行时始终运行该功能。因此，如果您传入true，则匹配功能将始终针对不支持的桌面浏览器执行（但对于支持的浏览器仍然是有条件的）。这将允许您为旧版浏览器提供桌面体验，这在移动优先方法中特别有用。

如果您还有任何问题，很乐意为您提供进一步帮助

于 2012-11-08T17:33:27.240 回答
0

尝试从 respond.js 中删除 matchMedia 的包含，然后在 respond.js 之后加载 match.media 和 enquire.js。在 IE 7 和 8 中使用查询 v 2.0.2 为我工作。

于 2013-08-20T19:36:53.880 回答
0

我找到了一个似乎适用于 IE8 的解决方案

1.非常重要！如果你使用它，从响应 JS 中删除 match.media（如果没有，它会在 IE 中静默失败）

2.包括 Modernizr 至少有媒体查询测试、负载、shiv：http ://modernizr.com/download/#-shiv-mq-cssclasses-teststyles-load

3.在<head>中（因为我们需要respondjs在head中）

<script src="../../common/vendor/modernizr/modernizr.custom.js"></script>
<script>
    Modernizr.load([
        // Test need for CSS media query polyfill
        {
            test: Modernizr.mq("only all"),
            nope: "../../common/vendor/respond/respond.min.js"
        }
    ]);
</script>

4.Before </body> 标签加载polyfill和你的脚本

<script>
    Modernizr.load([
        {
            test: window.matchMedia,
            nope: [
                "../../common/vendor/polyfills/media.match.js",
                "../../common/vendor/polyfills/matchMedia.addListener.js"
            ]
        },
        '../../common/vendor/enquire/enquire.min.js',
        '../../common/scripts/script.js'
    ]);
</script>

我希望它对你有用！

于 2014-10-02T09:38:39.477 回答