レシポンシブデザイン IE6,7,8でcss3-mediaqueries.jsが効かない対処

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
レシポンシブデザイン IE6,7,8でcss3-mediaqueries.jsが効かない対処
 レシポンシブデザインでは、PCやスマホの表示をCSS3のMedia Queriesを使ってスタイルシートを切り替える事になります。しかしIE6、IE7、IE8はこのMedia Queriesに標準で対応していないため、css3-mediaqueries.jsを読み込ませて使えるようにします。しかし書き方によって、css3-mediaqueries.jsが効かない場合があることがわかりました。



スタイルシートが読み込まれない


 本ブログはPCとスマホ表示をMedia Queriesを使って、cssを切り替えて表示を変えているのですが、ある時IE6・IE7、IE8で表示させてみると……

IE6・IE7・IE8でスタイルシートが効いてない

 普段はFirefoxを使っているので、まったく気がつかなかったのですが、思いっきり表示に不具合が出ていました…… これはひどい

 よく調べてみるとIE6・IE7・IE8でcssが読み込まれていないことがわかりました。



Media Queriesを使ってcssを読み込む方法は3つ


 通常、Media Queriesを使ってスタイルシートを分ける時は、IE8以下には効かないので、
<!--&#91;if lt IE 9&#93;>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<!&#91;endif&#93;-->

 このおまじないをheadタグ内に書いて、Media Queriesに対応させます。しかし今回は効いていません。

 Media Queriesを使ってcssを読み込む方法は3つあります。それぞれheadタグ内に書きます。

linkタグのmedia属性
<link rel="stylesheet" media="screen and (max-device-width: 769px)" href="pc.css" />
<link rel="stylesheet" media="screen and (max-device-width: 768px)" href="tablet.css" />
<link rel="stylesheet" media="screen and (max-device-width: 640px)" href="smart.css" />

@media
@media screen and (min-width: 769px){
/* 直接スタイルを記入 */
}
@media screen and (max-width: 768px){
/* 直接スタイルを記入 */
}
@media screen and (max-width: 640px){
/* 直接スタイルを記入 */
}

@import
@import url('pc.css') screen and (min-width: 769px);
@import url('tablet.css') screen and (max-width: 768px);
@import url('smart.css') screen and (max-width: 640px);



css3-mediaqueries.jsは@mediaの書き方のみ対応


 よくよく調べてみると、css3-mediaqueries-jsは、@mediaの書き方のみ対応しているようです。

 つまり本ブログの場合、このようにlinkタグで書いていたため、スタイルシートが読み込まれなかったのが不具合の原因でした。
<link rel="stylesheet" media="screen and (min-device-width: 641px)" href="<?php bloginfo('template_url'); ?>/pc.css" />
<link rel="stylesheet" media="screen and (max-device-width: 640px)" href="<?php bloginfo('template_url'); ?>/smartphone.css" />


 しかしながら、linkタグで読み込んだpc.css内に、@media screen and (max-width: 640px){} ……と書いてもなぜかダメでした。

 @mediaの書き方だと、もう直接書くしかないのですが、スタイルシートの記述も多いので、できればファイルを分けて管理したいというのが本音です。



暫定対処法


 そこで検討した結果、発想の転換で「Media Queriesで読み込めないなら、IEの条件付きコメントでスタイルシートを読めばいいじゃない!」ということで、
<!--&#91;if lt IE 9&#93;>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<!&#91;endif&#93;-->
↓↓↓
<!--&#91;if lt IE 9&#93;>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/pc.css" />
<!&#91;endif&#93;-->

 このように、css3-mediaqueries.jsを読み込むところを、かわりにPC用のスタイルシートを読みこませるようにしました。この状態で確認するとIE6・IE7・IE8の表示はokでした。

 一応これでIE6-8に対処できたとはいえ、まっっったくスマートな対処ではないので、お恥ずかしい限りですが、これ以外思いつかなかったので、とりあえずこれで動かしている状態です。

 同様の不具合でお悩みの方がおられれば、参考になれば幸いです。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。

コメント

コメントを残す

*

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