IE9以下でもMedia Queriesを使う覚書

IEってほんと嫌!

デバイスの解像度ごとのCSSを適用する・・・

CSS3の「Media Queries(メディアクエリ)」
これって、IE9以下では使えません。

Browser Support Checklist CSS3

今まで作成したサイトを手直ししてて
ハマっちまいました、、、

IE9で確認してるのに、なぜかCSSが効かない。
悩みに悩んでやっと気づきました。

 

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

 

 

これ↑、削除したら、エラー続出!あぶない、あぶない。

 

ヘッダー内にこんなもの↑が; ̄ロ ̄)!!

詳しいことは置いといて
とにかく、IE8以上のブラウザでもIE7のように見えるってことですよね?

 

IE9なのにCSS3(Media Queries(メディアクエリ))が使えないのはこれで解決ですが・・・
自分以外の閲覧者のブラウザやブラウザのバージョンはどうしようもないので
↓こちらにお世話になりました!   おまじない? IE9以下の場合、css3-mediaqueries.jsを読み込む。

 

<!--[if lt IE 9]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->

条件付きコメントの詳細はこちら↓

これで、IE9以下でも media queries が使えるようになりましたヾ(@⌒▽⌒@)ノワーイ!

モバイルパソコンのみで更新されてる「ボン・クラージュ!」さまのサイトも無事完了。

 

 

1000px~

 

通常の解像度高めのパソコン用

 

 

~870px

 

解像度低めのモバイルPCやipad横向き用

 

 

~770px

 

ipad縦向き用

 

 

 

~620px

 

タブレット用

 

 

 

~480px

 

 

スマホ横

 

 

 

~320px

スマホ縦

 

 

携帯での閲覧もここまでできたらいいんだけど

携帯は、自由がきかないからね~、キャリア間の差も大きいし。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA