iPadやiPhoneなど、デバイスごとに最適化したCSSを読み込む Media Queries

iPhoneとかiPadとか、デバイスに応じて最適化する

@tee_suzuki さんに、Media Queries なる実装が存在すると聞いて、早速トライしてみました。Media Queries自体はCSS3の実装の一環のようです。media属性の中に、デバイスの種類や解像度、向きなどの条件文を記述することで、適用するCSSを分岐させる仕組み。

こんな感じのものをheader要素へ

width: 〜480pxの端末のときには iphone.css
<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css" />

width: 481〜1024の端末が縦（portrait）のときには ipad-portrait.css
<link rel="stylesheet" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css" />

width: 481〜1024の端末が横（landscape）のときには ipad-landscape.css
<link rel="stylesheet" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad-landscape.css" />

width: 1025〜の端末のときにはpc.css
<link rel="stylesheet" media="screen and (min-device-width: 1025px)" href="pc.css" />

Media Queries デモ

ためしに、Media Queriesを使ったデモページ を用意してみました。とても単純に、背景色と表示される文字が違うだけの挙動です。デバイスの向きに応じてCSSが切り替えられるのは興味深いです。

iPadだと、縦向きはPC互換なイメージですが、横向きにしたときに特有のUIを提供してもいいかもしれません。選挙速報とか災害速報とか、データ放送的なイメージ。

他にも、CSSファイルの中に直接、@ルール(?)で記述することもできます。個人的にはCSSの中にはあまり書きたくない記述ですが...。

@media all and (orientation:landscape) {
     /* デバイスが横向きのときのためのCSSを書いてみたりできる */
}

参考になりそうなページ

既に詳細にまとめられているページが幾つかあったので、改めてメモ貼りしておきます。

• めざましTech - Media Queries でデバイスの対応
• MediaQuery まとめ - IT戦記
• Using CSS Media Queries to Style Your iPhone and iPad HTML - O'Reilly Broadcast

---