• HOME
  • コーディング
  • IE11(IE10も?)のエミュレーションモードでrespond.jsやhtml5.jsが効かない場合の解消法
schedule2014.3.27

IE11(IE10も?)のエミュレーションモードでrespond.jsやhtml5.jsが効かない場合の解消法

最近IEのF12で使えるエミュレーション(デバックモードや開発者ツールとか言われてた?)が精度が高いので重宝してました。
んが、しかしIE7,8にHtml5とメディアクエリを対応させるために読み込ませていた「respond.jsやhtml5.js」が効かない・・・
なんでですかー、IEテスターは動いてるのにー!

検証した結果、驚愕の事実が判明・・・
IE10も同じかも知れません、現在環境にないので未検証。

IEコメントハックでバージョンを指定して読ませているファイルはエミュレーションでは読み込まない

皆さんよく使われているこれ↓

<code>&lt;!--[if lt IE 9]&gt;
&lt;script src="http://html5shim.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
&lt;script src="common/js/respond.min.js">&lt;/script&gt;
&lt;![endif]--&gt;</code>

HTML5を使えるようにしてくれるGoogleの「html5.js」と、メディアクエリを使えるようにする「respond.js」を
IE8以下は読み込みなさいというコメントハックです。

なんとIE11エミュレーションでは読み込みません。まあバージョン11ですからね・・・これはIE10でも同じ現象でるかもしれません。
このコメントハックを消すとちゃんとエミュレーションでもIE8,IE7のチェックが可能になります。が・・・↓↓

<code>&lt;script src="http://html5shim.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
&lt;script src="common/js/respond.min.js"&gt;&lt;/script&gt;</code>

これやるとモダンブラウザも読み込むから速度が犠牲になります。

IEエミュレーションでIE7,8モードにhtml5.jsとrespond.jsを使えるようにする暫定的な解消法

ちょっと馬鹿っぽい事で解消できます。
ただ開発用というだけで、本番時には一括置換で戻す必要があります。

[if lt IE 9] から [if lt IE 100]とかにする(笑)

こうすればIE100未満のバージョンは読み込みます。馬鹿っぽい。
つまりこうですね。↓↓

<code>&lt;!-- [if lt IE 100]&gt;
&lt;script src="http://html5shim.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
&lt;script src="common/js/respond.min.js"&gt;&lt;/script&gt;
&lt;![endif]--&gt;
</code>

最後に置換で[if lt IE 9]に戻すのを忘れないで下さい。でないと全てのIEのバージョンで読み込まれ無駄な処理が行われます。

他に良い方法がありませんか

あれば教えて欲しいですね。。。