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

  • 62712
    views
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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

IE8 ではもともと Media Queries が効かないため、css3-mediaqueries.js を利用して

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

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

目次



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

IE8 でも Media Queries を使えるようにするには、css3-mediaqueries.js を <head> 内に記述します。
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

サイト全体をHTML5 で組んでいる場合 html5.js との併用版でもOKです。
<!--[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]-->

あるいは、HTTPS 版でも問題なしです。
<!--[if lt IE 9]>
<script src="https://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->



(2)CSS のリンクの問題

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



(3)CSS の記述ミス

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




(4)saved from url の問題

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

  • 62712
    views
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

この投稿と関連する記事一覧

この記事に関するコメント

コメントを残す