レスポンシブ プロジェクトの一部で、enquire.js を使用していくつかの基本的な toggleClass 関数を実行しています。
Android 2.3 以下および iOS 4 Safari などの古いブラウザーでは、次の例は機能しません。
以下に示すように、modernizr のテストを行っています。古い Android ブラウザーと iOS 4 Safar は matchMedia をサポートしていないため、matchMedia ポリフィルが使用されます。
テスト ケースを作成し、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、これ、このドキュメント);
どんな助けでも大歓迎です。enquire.js を正しく使用していないのか、何か不足しているのかわかりません。
なしでさらに縮小されたテストケースを作成しましたが、同じ結果が得られています。以下のjsを使用しました（意味がありませんが、最初の読み込み時にアラートが読み込まれます）
(関数 ($、ウィンドウ、ドキュメント) {
Modernizr.load([ //matchMedia polyfill の最初のテストの必要性 { test: window.matchMedia, nope: 'js/media.match.min.js', load: 'js/enquire.min.js', callback: function( ){ アラート ("テスト"); } } ]);
})(jQuery、これ、このドキュメント);