【iPhone】<meta name=”viewport”>について

<meta name=”viewport>について、Safari Dev Centerを参考に、自分なりにまとめてみた。
http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html#//apple_ref/doc/uid/TP40008193

Viewportとは
iPhoneにおける仮想的なウィンドウサイズのこと。デフォルト値は980px
このメタタグにより、ページを最初に開いた時の画面サイズ、拡大率などを指定できる。

iPhoneの画面サイズは横:320px 縦:480px。

例えば、下記は「横幅はデバイス(iPhoneは横幅320pxなので、ここでは320pxになる)に合わせる、拡大率は100%、ユーザーに拡大縮小させない」となる

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

属性は下記の通り。プロパティはカンマ(,)で区切る。

プロパティ 説明 デフォルト 範囲
width デバイスの横幅 980px 200px to 10,000px,device-width(デバイスの横幅に合わせる),

device-height(デバイスの縦幅に合わせる)

height デバイスの縦幅 - 223px to 10,000px,device-width(デバイスの横幅に合わせる),

device-height(デバイスの縦幅に合わせる)

initial-scale ページが最初に読み込まれた時の拡大率 1 minimum-scale と maximum-scaleプロパティの範囲に準ずる
user-scalable ユーザーに拡大縮小を許可するか yes yes or no
minimum-scale 拡大率の下限 0.25 0 to 10
maximum-scale 拡大率の上限 1.6 0 to 10

「【iPhone】<meta name=”viewport”>について」への2件のフィードバック

コメントを残す

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

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