Media QueriesがIE8で効かない場合の対処法

iPad 向け、iPhone 向けにWEBサイトの最適化を色々と試しながら、
「まだまだ奥が深いなぁ、Media Queries…」
と思っていた最中、IE8 で落とし穴です > <

IE8 ではもともと Media Queries が効かないため、css3-mediaqueries.js を利用して
[html] <!–[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]–>
[/html] と <head> 内に記述してあげる必要があるのですが、
それでも、IE 8で Media Queries が効かない。。。

原因を色々探していましたが、今回の直接の原因以外でも
結構色々なサイトで同様の事例が紹介されているようでしたので、
今回は備忘録も兼ねて整理しました。

目次



(1)css3-mediaqueries.js を読み込んでいない

IE8 でも Media Queries を使えるようにするには、css3-mediaqueries.js を <head> 内に記述します。
[html] <!–[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]–>
[/html]
サイト全体をHTML5 で組んでいる場合 html5.js との併用版でもOKです。
[html] <!–[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]–>
[/html]
あるいは、HTTPS 版でも問題なしです。
[html] <!–[if lt IE 9]>
<script src="https://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]–>
[/html]


(2)CSS のリンクの問題

CSS を@import で呼び出している(import.cssなど)場合、
[html] <style>
@import "base.css";
@import "font.css";
@import "style.css";
</style>
[/html] IE 8で Media Queries が効かないようですので、
[html] <link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="font.css">
<link rel="stylesheet" href="style.css">
[/html] のようにCSS を記述すれば動くようになります。



(3)CSS の記述ミス

Media Queries の記述が正しくない、という原因もあります。
例えば、
[html] @media (min-width: 1200px){
}
[/html] の記述だとIE8 では効かないようです。その場合は
[html] @media screen and (min-width: 1200px) {
}
[/html] と正しく記述する必要があります。




(4)saved from url の問題

わたしは今まで使ったことがありませんが、「ローカル上でエラー表示無しにJavaScript を動かす」ための呪文
[html] <!– saved from url=(0013)about:internet –>
[/html] の記述がある場合にも、IE 8で Media Queries が効かないようなので注意が必要です。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください