私のサイトはhttp://www.thetruenorth.co.uk/です
IE9 がダウンしている自分のサイトで JQuery を動作させることができません。他のすべてのブラウザで問題なく動作します。
小さな画面（モバイル）であるかどうかを検出するのは、以下のコードであることに気付きました。このビットを削除すると、すべてが機能します。モバイル用の JS を無効にする他の方法がわからないため、これを使用しますが、デスクトップ用はそのままにしておきます。提案を歓迎します。
$(document).ready(function(){
if(matchMedia('only screen and (max-width: 1023px)').matches)
{}
else {
CODE HERE
}
});
バグか、私が気付いていない何かがあるような気がします。誰かが私を悲惨な状況から救ってくれませんか?
ありがとう
IE9 での簡単なデバッグ
次のエラーが表示されます。
SCRIPT5009: 'matchMedia' is undefined
scripts.js, line 2 character 2
IE9 は「matchMedia」機能をサポートしていないため、定義していません。コードでそれを参照しようとすると、JavaScript の実行がその時点で完全に停止します。
何が起こっている
jQuery がページに読み込まれています。これを確認するには、コンソール出力の下のテキスト入力行に「$」と入力して Enter キーを押します。コンソールは、$ の定義方法に関するデータを出力します。これは、jQuery がロードされた非常に良い兆候です。すべての状況で決定的なわけではありませんが、これについては準備ができています。
何が起こっているかというと、onDomReady ($(document).ready(...) 経由) を実行しているコールバックですが、最初の行でエラーが発生しています。このエラーにより、残りのコールバックが実行されなくなります。
機能サポートの確認
caniuse.comを使用して、どのブラウザーが機能 (JS、CSS など) をサポートしているかを確認できます。この場合: http://caniuse.com/matchmedia . IE10 が matchMedia 関数をサポートする最初のバージョンであることに注意してください。以前のバージョンでは、デフォルトで matchMedia がなく、それを参照するとエラーが発生すると想定できます。
今できること
caniuse.com サイトの上部には、「リソース」というタイトルの横方向のリストがあります。この領域では、通常、特定の機能をサポートしていないブラウザーにパッチを適用する方法を見つけることができます。
matchMedia の場合、カスタム js を使用して matchMedia の機能をエミュレートする「ポリフィル」へのリンクがあります。URL はhttps://github.com/paulirish/matchMedia.js/です。
ポリフィルには、使用に制限や問題がある場合があるため、注意してください。また、matchMedia ポリフィルが Web テクノロジの著名人であるPaul Irishによって作成されたことも興味深い点です。
条件付き IE インクルードに関する注意
IE は条件付きコメントをサポートしているため、IE の特定のバージョンに対してのみ上記で定義したポリフィルを含めることができます。あなたの場合、IE10未満のもの。これは MDN で文書化されています: http://msdn.microsoft.com/library/ms537512.aspx
<!--[if lte IE 10]]>
<script src="polyfill.js"></script>
<![endif]-->
これは、可能な場合はブラウザーの実装を使用し (通常はより高速で、より多くの機能を備えている可能性があります)、必要な場合にのみポリフィルを使用できるようにするためです。
j08691 があなたの問題を発見しました。
matchMediaIE9 以下、Firefox 6 以下、または Safari 5.1 以下で作業する必要がある場合は、shim する必要があります。これは、古いブラウザで使用できるようにするmatchMedia のポリフィルです。
これは jQuery の問題ではないことに注意してください。この問題は、matchMedia ブラウザーのサポートに関するものです。
ブラウザが Chrome かどうかを確認してから、github から matchMedia コードを追加します。以下をご覧ください。
$(document).ready(function() {
var isChrome = !!window.chrome;
if (isChrome == true) {
//do this for chrome
} else if (isChrome != true) {
//do this for all other browsers including IE
//so copy and paste current matchMedia.js script form here https://github.com/paulirish/matchMedia.js/blob/master/matchMedia.js like below
/*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas, David Knight. Dual MIT/BSD license */
window.matchMedia || (window.matchMedia = function() {
"use strict";
// For browsers that support matchMedium api such as IE 9 and webkit
var styleMedia = (window.styleMedia || window.media);
// For those that don't support matchMedium
if (!styleMedia) {
var style = document.createElement('style'),
script = document.getElementsByTagName('script')[0],
info = null;
style.type = 'text/css';
style.id = 'matchmediajs-test';
script.parentNode.insertBefore(style, script);
// 'style.currentStyle' is used by IE <= 8 and 'window.getComputedStyle' for all other browsers
info = ('getComputedStyle' in window) && window.getComputedStyle(style, null) || style.currentStyle;
styleMedia = {
matchMedium: function(media) {
var text = '@media ' + media + '{ #matchmediajs-test { width: 1px; } }';
// 'style.styleSheet' is used by IE <= 8 and 'style.textContent' for all other browsers
if (style.styleSheet) {
style.styleSheet.cssText = text;
} else {
style.textContent = text;
}
// Test if media query is true or false
return info.width === '1px';
}
};
}
return function(media) {
return {
matches: styleMedia.matchMedium(media || 'all'),
media: media || 'all'
};
};
}());
//below you can add your own matchMedia code
}
});
PHPでこれを行う方が良いかもしれません。つまり、おそらく matchMedia を正しく実行できません。どのクライアントでも同じように実行されるため、私は常にサーバー側でそのようなものを保持しています。PHP を使用している場合は、get_browser()を試してください。簡単なifステートメントを書くのは本当に簡単です。ヘルプが必要な場合は、例を確認してください。
これmatchMediaは、IE10 でのみ動作するためです。
参照: https://developer.mozilla.org/en-US/docs/DOM/window.matchMedia