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


公開日:2011年10月25日 火曜日   〇年前のこの日、何してた?
Categories: Works | Tags: , , | 閲覧数:955 | Leave a comment

IEってほんと嫌!

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

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

Browser Support Checklist CSS3

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

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

 

 

 

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

 

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

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

 

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

 

追記

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

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

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

 

 

1000px~

 

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

 

 

~870px

 

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

 

 

~770px

 

ipad縦向き用

 

 

 

~620px

 

タブレット用

 

 

 

~480px

 

 

スマホ横

 

 

 

~320px

スマホ縦

 

 

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

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

もし、気に入っていただけたらシェアしていただけると嬉しいです♪ この記事へのリンクはこちら↓コピーしてHTML編集画面に貼り付けでお使いください。

ブログの更新情報はこちらで配信中~
Feedlyで購読
follow us in feedly
更新をメールでお知らせ 配信: FeedBurner

sponsored


公開日:2011年10月25日 火曜日   〇年前のこの日、何してた?
Categories: Works | Tags: , , | 閲覧数:955 | Leave a comment

著者 ねこもりや

どうぶつ占いは「コアラ」。ボーっとする時間が常に必要。”猫になりたい”とひたすら願う怠けもの。

My Photos

Leave a Reply

Required fields are marked *


CAPTCHA