最近IEのF12で使えるエミュレーション(デバックモードや開発者ツールとか言われてた?)が精度が高いので重宝してました。
んが、しかしIE7,8にHtml5とメディアクエリを対応させるために読み込ませていた「respond.jsやhtml5.js」が効かない・・・
なんでですかー、IEテスターは動いてるのにー!
検証した結果、驚愕の事実が判明・・・
IE10も同じかも知れません、現在環境にないので未検証。
目次
IEコメントハックでバージョンを指定して読ませているファイルはエミュレーションでは読み込まない
皆さんよく使われているこれ↓
<code><!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <script src="common/js/respond.min.js"></script> <![endif]--></code>
HTML5を使えるようにしてくれるGoogleの「html5.js」と、メディアクエリを使えるようにする「respond.js」を
IE8以下は読み込みなさいというコメントハックです。
なんとIE11エミュレーションでは読み込みません。まあバージョン11ですからね・・・これはIE10でも同じ現象でるかもしれません。
このコメントハックを消すとちゃんとエミュレーションでもIE8,IE7のチェックが可能になります。が・・・↓↓
<code><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <script src="common/js/respond.min.js"></script></code>
これやるとモダンブラウザも読み込むから速度が犠牲になります。
IEエミュレーションでIE7,8モードにhtml5.jsとrespond.jsを使えるようにする暫定的な解消法
ちょっと馬鹿っぽい事で解消できます。
ただ開発用というだけで、本番時には一括置換で戻す必要があります。
[if lt IE 9] から [if lt IE 100]とかにする(笑)
こうすればIE100未満のバージョンは読み込みます。馬鹿っぽい。
つまりこうですね。↓↓
<code><!-- [if lt IE 100]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <script src="common/js/respond.min.js"></script> <![endif]--> </code>
最後に置換で[if lt IE 9]に戻すのを忘れないで下さい。でないと全てのIEのバージョンで読み込まれ無駄な処理が行われます。
他に良い方法がありませんか
あれば教えて欲しいですね。。。