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

Question

好的,所以我使用Respond.js将polyfill用于旧版浏览器上的媒体查询(ie8是最重要的).

与此同时,我正在研究使用Enquire.js,它可以根据媒体查询匹配执行js-code.

孤立地测试这个东西有效:

• respond.js为IE8正确执行css中定义的媒体查询
• enquire.js根据匹配css的媒体查询正确执行javascript代码.(适用于非传统浏览器)

然而,组合似乎不起作用.即:

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

由于Respond.js包含Paul Irish的MatchMedia的polyfill(根据:Inquire的文档)应该足以支持遗产,我不确定会出现什么问题.

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

Answer 1

我是询问的作者,所以我会帮助我.

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

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

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

如果您有任何疑问,请继续提供帮助