Viewportのお話
- 2. Viewport とは?
ウィンドウサイズにあわせて拡大率を可変させるおまじ
ないです。
デフォルトで Viewport の横幅は 980px に設定されてい
ます。
例えば、横幅が 780px のウェブページでは 200px の余
白が生まれ、 またリキッド(可変)レイアウトのウェ
ブページでは横幅が 980px に設定されます。
iPhone の実際の画面サイズは、縦に持った際は
320x480px 、横に持った際は 480x320px となりますの
で、 デフォルトの 980px で表示した場合、 PC 概ね 1/3
~ 1/2 程度のサイズに縮小表示されます。 その為、ペ
ージを開いた時点では文字が小さすぎて判読出来ないこ
とがしばしば起こり得ます。
xhtml にはこの Viewport を操作する Meta Tag が用意さ
れています。 これにより、 PC 等他の環境からの閲覧
に影響を与えずに、 SmartPhone に適したウェブサイト
- 4. プロパティの詳細
プロパ 値
ティ 単位・指定方
内容 デフォルト 許容範囲 その他
法
Viewport
の 特別な値として「 device-width* 」の
width px 980px 200 ~ 10,000px
横 指定が可能
幅
Viewport
の 横幅とアスペクト比か 特別な値として「 device-height* 」の
height px 200 ~ 10,000px
縦 ら計算される値 指定が可能
幅
乗数で指定
minimum-scale (後述)~
倍率の (例: 表示範囲から
initial-scale maximum-scale (後
初期値 120% の場 計算される値
述)
合は 1.2 )
minimum- 倍率の
乗数で指定 0.25 0 ~ 10
scale 最小値
maximum- 倍率の
乗数で指定 1.6 0 ~ 10
scale 最大値
拡大縮小
no (拡大縮小不可)にすることで
の
user-scalable -- ( yes / no ) yes -- フォーム入力時のスクロールも
可
不可
否
えば以下は、 Viewport の横幅が iPhone のディスプレイのサイズで、倍率は 1 、 2 倍まで拡大可能、という内容です
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
- 5. 注意点
コンテンツより小さい viewport width/height を設定すると無視
される
viewport で initial-scale を設定せずに width/height を設定する
と
全画面表示となる
viewport で initial-scale も width/height も設定しないと
width=980px/height=1091px となる
表示域とコンテンツのサイズが一致しない場合に
initial-scale を設定すると、意図しないレイアウトが発生する
ことがある