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

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

スタイルシートが読み込まれない
Media Queriesを使ってcssを読み込む方法は3つ
css3-mediaqueries.jsは@mediaの書き方のみ対応
暫定対処法

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

　本ブログはPCとスマホ表示をMedia Queriesを使って、cssを切り替えて表示を変えているのですが、ある時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に対処できたとはいえ、まっっったくスマートな対処ではないので、お恥ずかしい限りですが、これ以外思いつかなかったので、とりあえずこれで動かしている状態です。

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