• RSS

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

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

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

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

@media 規則で指定する

<link> タグのmedia 属性で指定すると動いてくれないようですので、css3-mediaqueries.js を使う場合は @media 規則で指定すると良いようです。



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

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


media type を正確に書く

@media (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 -->
がある場合に、IE8 でMedia Queries が効かなくなる事例もるようです。



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

コメント

コメントを残す

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