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

Pocket

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を固定にすると右側に不自然な余白が出ることがある。

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

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

Pocket

コメントを残す

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>