我正在使用 enquire.js 为我的一些响应式项目做一些基本的 toggleClass 功能。
对于 Android 2.3 及更低版本和 iOS 4 Safari 等旧版浏览器，以下示例不起作用。
我正在做一些现代化测试，如下所示。较旧的 Android 浏览器和 iOS 4 Safar 不支持 matchMedia，因此 matchMedia polyfill。
我创建了一个测试用例并使用 BrowserStack 对其进行了测试，但它在 iOS 4 及更低版本上失败了。http://goo.gl/3a3ss，或者一个可能有效也可能无效的小提琴.. http://jsfiddle.net/jSg6X/
最初这是在 Drupal 站点上使用的。在初始加载时，一切正常。如果您刷新页面或尝试转到另一个页面，则脚本在 matchMedia 测试中失败。如果您清除浏览器缓存并重新加载，它会再次起作用，但仅适用于该页面。
(函数 ($, 窗口, 文档) {
Modernizr.load([
{
test: Modernizr.mq('only all'),
nope: 'js/respond.min.js'
},
{
test: window.matchMedia,
nope: 'js/matchMedia.js'
},
{
load: 'js/enquire.min.js',
complete: function(){
var query = "all and (max-width:600px)";
var $myButton1 = $(".mybutton1");
var $myButton2 = $(".mybutton2");
enquire.register(query, [
{
match: function(){
$myButton1.on("click", function(){
$(".menu").toggleClass("showme");
});
},
unmatch: function(){
$myButton1.off("click");
},
match: function(){
$myButton2.on("click", function(){
$(".menu2").toggleClass("showme");
});
},
unmatch: function(){
$myButton2.off("click");
}
}
],true).listen();
}
}
]);
})(jQuery, this, this.document);
任何帮助，将不胜感激。我不确定我是否没有正确使用 enquire.js，或者我遗漏了一些东西。
我已经创建了一个进一步简化的测试用例，并且得到了相同的结果。我使用了下面的js（没有意义，我知道，但它会在第一次加载时加载警报，仅此而已）
(函数 ($, 窗口, 文档) {
Modernizr.load([ //第一个测试需要 matchMedia polyfill { test: window.matchMedia, nope: 'js/media.match.min.js', load: 'js/enquire.min.js', callback: function( ){ 警报(“测试”); } } ]);
})(jQuery, this, this.document);