Question

好的，所以我在传统浏览器上使用Respond.js polyfill进行媒体查询（ie8是最重要的）。

与此同时，我正在调查使用Enquire.js，它允许基于媒体查询匹配执行js代码。

孤立地测试这个东西是有效的：

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

然而，组合似乎不起作用。我：

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

由于Respond.js包含Paul Irish的polyfill for MatchMedia（根据Enquire's documentation）应该足以支持遗产，我不确定会出现什么问题。

所以只是要检查：这个组合应该正常吗？

Answer 1

我是查询的作者，所以我会帮助我。

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

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

我不知道这是否会对您有所帮助，但是查询的register方法可以接受第三个参数shouldDegrade，这是一个信号，询问您是否希望功能始终运行如果浏览器被视为无法使用。因此，如果您传入true，将始终为无法使用的桌面浏览器执行匹配功能（而仍然是有能力的浏览器的条件）。这将允许您向旧版浏览器提供桌面体验，尤其适用于移动优先方法。

如果您有任何其他问题，请尽快提供帮助

Answer 2

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

Answer 3

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

1. 非常重要！如果您使用它，则从响应JS中删除match.media（如果不是，它将在IE中无声地失败）

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

3.In＆lt;头＆gt; （因为我们需要回应头脑）

<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＆lt; / body＆gt;用于加载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>

我希望它对你有用！

互操作性：Enquire.js不执行Respond.js触发的css媒体查询

3 个答案: