読者です 読者をやめる 読者になる 読者になる

ゆうなんとかさんの雑記帳的な。

Twitterで踊ったり音ゲーしたりしてるあの名前がよくわからない人が書いてるらしいよ。

Media Queriesの使い方とスマートデバイスの画面サイズ

両方とも並行して使うのに別々の記事になってることが多いので(両方共それだけで数十KBのテキストを書くことができるので当たり前といえば当たり前)、まとめておきます。

Media Queriesの概要とか

簡単なつかい方

@media screen and (max-width:640px) {
/*幅640pxまでのスクリーンに適用されるスタイル*/
}

ほんの少しだけ詳しい説明

様々な画面サイズに対応する方法はいくつかあるのですが、Media Queryはそのひとつです。上のように画面サイズやデバイスのタイプに応じて、特定のスタイルを適用したりしなかったりできます。

利点と欠点

Media Queriesを使う場合と、モバイル用ページを用意するのとで比較してみました。

Media Queriesの特徴
  • 利点
    • HTMLを使いまわせる
    • PCで画面幅を狭くしても綺麗に表示される
  • 欠点
    • ページサイズが増える
    • レイアウトに制約がつく
デバイス別ページの特徴
  • 利点
    • ページ構造を最適化できる
    • サイト構成も別にすることができる
  • 欠点
    • ページが増えるぶん開発コストがかかる
    • リダイレクトや振り分けなどでサーバー側が大変

参考になるリンクとか

詳しくはこちらを見てください。

スマートデバイスの画面サイズとか

iOSのデバイスまとめ

こちらにまとまっています。

Androidのデバイスまとめ

非常に多くの画面サイズがあるAndroid。多すぎて何が何やら…

そのほか

Windows Phoneに関してはWikipedia

従来はWVGA(800×480)のみだったのに対して、WXGA(1,280×768)、720P(1,280×720)が新たにサポートされる。

とあります。現時点ではほぼWVGAだと思ってよいかもしれません。