こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

ie8メディアクエリによるcss分岐ができない

ie8でメディアクエリによるcssの画面サイズ分岐ができなくて困っています。
環境は、windows XP Service Pack3です。

1.下記方法でIE8以下にもHTML5とメディアクエリを使えるようにしました。
 (HTML5はバリデータでチェック済みです。)
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

2.下記方法でデバイスの横幅に対応したcssを指定しました。
<link href="smartphone.css" media="screen and (max-width:480px)" rel="stylesheet" type="text/css">
<link href="tablet.css" media="screen and (min-width:481px) and (max-width:1024px)" rel="stylesheet" type="text/css">
<link href="pc.css" media="screen and (min-width:1025px)" rel="stylesheet" type="text/css">

3.現象
a. firefoxではローカル上のページもサーバー上のページも適用されていました。
b. ipodではサーバー上のページしか見ていませんが、適用されていました。
c. しかし、ie8ではローカルでもサーバーにアップしてもcssが適用されません。
d. ie8では、media="screen"だけの場合は適用されていますが、and以降のサイズ指定が入ると適用されません。
e.type=などの指定もアリ、ナシどちらの組み合わせも適用されません。

よろしくお願いいたします。

投稿日時 - 2013-01-17 13:20:24

QNo.7896260

すぐに回答ほしいです

質問者が選んだベストアンサー

IE8はCSS3のmediaqueryに対応していません。
mediaqueryを使用しなくても、ウィンドウ幅に追随するリキッドデザインで作成した上で、CSS3に対応しているスマートホンやモダンブラウザ向けにCSSを作成するのが基本です。

IE8用のjavascriptはありますが・・・
css3-mediaqueries-js ( http://code.google.com/p/css3-mediaqueries-js/ )
Respond.js( https://github.com/scottjehl/Respond )
 あまりお勧めはしません。

投稿日時 - 2013-01-17 17:54:51

補足

早速のご回答、ありがとうございます。

もしよろしければ、続けて教えていただけますか。

あまりお勧めはしませんとのことですが、教えていただいたように、リキッドデザインがベストとのお考えからでしょうか。
それともjavascriptを使うと問題があるということでしょうか。

投稿日時 - 2013-01-17 18:29:08

お礼

ご回答ありがとうございました。
参考にさせていただきます。

投稿日時 - 2013-01-18 16:24:06

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問