iPhoneに最適化したページを作成するためには、表示領域の横幅が320pxとなるようにViewport（ビューポート）の設定が必要。
Viewportは表示領域のサイズを指定するプロパティ。
Viewportの定義方法
Viewportはmeta要素を使って定義する
<meta name="viewport" content="値" />
content属性には、以下の値を指定できる。複数を指定する場合は「,」で区切る。
| 内容 | 意味 | デフォルトの値 |
|---|---|---|
| width | Viewportの横幅 | 980px |
| height | Viewportの縦幅 | 幅に応じて自動 |
| initial-scale | ページ読み込み時の拡大率 | 1.0 |
| user-scalable | ユーザーによる拡大操作の許可 | yes |
| minimum-scale | 拡大率の最小 | 0.25 |
| maximum-scale | 拡大率の最大 | 1.6 |
Viewportを指定せずMobile Safariのデフォルト値を使用した場合
以下を指定したのと同じ状態になる。
<meta name="viewport" content="width=980px,initial-scale=1.0,user-scalable=yes,minimum-scale=0.25,maximum-scale=1.6" />
おすすめの設定
<meta name="viewport" content="width=divice-width" />
横幅をdivice-widthとし、他はデフォルトのまま。
divice-widthは対象デバイスの横幅を表す。
iPhoneであれば、縦向き状態の横幅は320px。この設定を使用した場合、本体を横向きにした場合でも表示領域の横幅は320pxのままになるため、1.5倍（480px÷320px）に拡大された状態で表示される。縦向き状態で文字や画像が小さすぎると感じた場合は、iPhoneを横向きにするだけで拡大できる。
なぜ「width=divice-width」と記述するのか？
「width=320px」ではなく「width=divice-width」と記述するのは、画面サイズが320px以外のデバイスでも最適化して表示させるため。
widthを固定にすると右側に不自然な余白が出ることがある。
この記事の内容は以下の書籍を参考にしています。
