[IE]IE8でCSS3のMedia Queriesが効かない場合の対処法

CSS

2013.08.07

IE8以下でもレスポンシブWEBデザインに対応させることができるcss3-mediaqueries.jsは便利なJavascript なのですが、「IE でMedia Queriesが効かない…」という問題によく悩まされます。

原因不明のモノもありますが、よくブログでも紹介されている回避策と自身で実践してみた上での対処法も合わせて、今回はMedia QueriesがIE8で効かない場合の解決方法を以下にまとめてみました。

@media 規則で指定する
@charset 記述をすると動かなくなる
media typeを正確に書く
複数のCSSファイルを読み込む場合、その順番を変えてみる
saved from urlの問題

@media 規則で指定する

@charset 記述をすると動かなくなる

CSS ファイルの中身の話ですが、@media 記述より前に@charset の記述があると、何故か動きません。。。
css3-mediaqueries.jsを使う上で起こる問題のようです。

media typeを正確に書く

Media Queriesの記述が正しくない、という原因もあります。

例えば、

@media (max-width:480px){
	body	{
    	-webkit-text-size-adjust: none
    }
}

@media (max-width:480px){

body {

-webkit-text-size-adjust: none

}

のように省略せずに、

@media only screen and (max-width:480px){
	body	{
    	-webkit-text-size-adjust: none
    }
}

@media only screen and (max-width:480px){

body {

-webkit-text-size-adjust: none

}

と記述します。

複数のCSSファイルを読み込む場合、その順番を変えてみる

responsive_contents.css、responsive_common.cssなど複数のCSSファイルを読み込む場合、ファイル内の記述内容にもよりますが、読み込む順番にも影響がありそうです。

どうしてもIE8でMedia Queriesが効かない場合は、CSSファイルの順番を変えてみてください。

saved from urlの問題

「ローカル上でエラー表示無しにJavaScriptを動かす」ためのスクリプト

<!-- saved from url=(0013)about:internet -->

1	<!-- saved from url=(0013)about:internet -->

がある場合もIE8でMedia Queriesが効かなくなる事例もるようです。

参考サイト
IEでMedia Queriesが効かない！と思ったら、saved from urlのせいでした