metaタグのviewportでスマホ向けサイトのサイズを制御する

viewportというのは仮想的なウインドウサイズで、iPhoneではデフォルト980pxになります。
（iPhoneの実際の画面サイズは320px×480px）
Media Queriesでデバイスに合わせてスタイルを振り分けるようにしてもviewportの980pxというサイズが邪魔してうまく振り分けてくれません。
そこで自分のサイトにあったサイズをviewportで指定していきます。

viewportの各プロパティ

width

デバイスの横幅。デフォルトは980px。200pxから10000pxまで指定可能。
デバイスの横幅に合わせる場合はdevice-widthを指定。

height

デバイスの縦幅。233pxから10000pxまで指定可能。
デバイスの縦幅に合わせる場合はdevice-heightを指定。

initial-scale

最初にページが読み込まれた際の拡大率。デフォルトは1。0から10まで指定可能。
（ただしminimum-scaleとmaximum-scaleの範囲に準ずる）

minimum-scale

最小の拡大率。デフォルトは0.25。0～10まで指定可能。

maximum-scale

最大の拡大率。デフォルトは1.6。0～10まで指定可能。

user-scalable

拡大・縮小の許可。デフォルトはyes。yes/noで指定。

各プロパティはカンマ（,）で区切ります。

【例】横幅はデバイスの横幅、拡大縮小は拒否の場合

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1" />

縦向きから横向きに変えたときに100%で指定している要素とかが横にのびる（横スクロールがでる）場合があります。これはmaximum-scaleのデフォルト値が1.6になっているからっぽい？？
横向きに変えたときでも画面にフィットさせたい場合は、maximum-scale=1を指定することでフィットしますが、拡大できなくなってしまうので注意が必要です。