ViewportでiPhoneの画面に合わせたサイズを指定

Pocket

iPhoneに最適化したページを作成するためには、表示領域の横幅が320pxとなるようにViewport(ビューポート)の設定が必要。
Viewportは表示領域のサイズを指定するプロパティ。


Viewportの定義方法

Viewportはmeta要素を使って定義する

[html]

[/html]

content属性には、以下の値を指定できる。複数を指定する場合は「,」で区切る。

内容 意味 デフォルトの値
width Viewportの横幅 980px
height Viewportの縦幅 幅に応じて自動
initial-scale ページ読み込み時の拡大率 1.0
user-scalable ユーザーによる拡大操作の許可 yes
minimum-scale 拡大率の最小 0.25
maximum-scale 拡大率の最大 1.6

Viewportを指定せずMobile Safariのデフォルト値を使用した場合

以下を指定したのと同じ状態になる。

[html]

[/html]

おすすめの設定

[html]

[/html]

横幅をdivice-widthとし、他はデフォルトのまま。
divice-widthは対象デバイスの横幅を表す。
iPhoneであれば、縦向き状態の横幅は320px。この設定を使用した場合、本体を横向きにした場合でも表示領域の横幅は320pxのままになるため、1.5倍(480px÷320px)に拡大された状態で表示される。縦向き状態で文字や画像が小さすぎると感じた場合は、iPhoneを横向きにするだけで拡大できる。

なぜ「width=divice-width」と記述するのか?

「width=320px」ではなく「width=divice-width」と記述するのは、画面サイズが320px以外のデバイスでも最適化して表示させるため。
widthを固定にすると右側に不自然な余白が出ることがある。

この記事の内容は以下の書籍を参考にしています。

HTML5+CSS3で作る 魅せるiPhoneサイト iPhone/iPad/iPod touch対応
本当にわかりやすいのでオススメです!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です