QR Code Business Card

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

レシポンシブデザイン 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以下には効かないので、


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

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

linkタグのmedia属性


@media


@import




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


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

 つまり本ブログの場合、このようにlinkタグで書いていたため、スタイルシートが読み込まれなかったのが不具合の原因でした。



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

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



暫定対処法


 そこで検討した結果、発想の転換で「Media Queriesで読み込めないなら、IEの条件付きコメントでスタイルシートを読めばいいじゃない!」ということで、

↓↓↓


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

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

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

SNSでもご購読できます。

コメント

    コメントを残す

    *

    日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)