- カタチグラフィックスのBlog – Katachigfxの日記と制作メモ

05.25

スマートフォンサイトを作るにはまずこれだ!viewport の指定方法。

Published 5月 25th, 2011 Posted in html・CSS No Comments »  

iPhone・Android 向けのサイト制作をする際に meta タグに viewport を指定して、デバイスの表示領域に合わせたページデザインを行うことができる。

<meta name="viewport" content="パラメータ=値, パラメータ=値, パラメータ=値">

●パラメータと値

width
ビューポート(可視領域)の幅(ピクセル値)。
デフォルト値は 980
200 から 10000 までの範囲を指定できる。
height
ビューポートの高さ(ピクセル値)。
デフォルト値は width の値とデバイスのアスペクト比から算出される。
233 から 10000 までの範囲を指定できる。
initial-scale
ページが可視領域内にフィットするように計算された値がデフォルト値となる。
minimum-scale から maximum-scale によって定義された範囲の値が指定できる。
最初にページが表示されるビューポートの値のみが指定可能。
user-scalableno を指定していなければズーム操作が可能となる。
ズームの範囲は minimum-scalemaximum-scale の範囲内に制限される。
minimum-scale
ビューポートの最小 scale 値。
デフォルト値は 0.25
0 から 10.0 までの範囲を指定できる。
maximum-scale
ビューポートの最大 scale 値。
デフォルト値は 1.6
0 から 10.0 までの範囲を指定できる。
user-scalable
ユーザーがズーム操作できるかどうかを yesno で指定する。
デフォルト値は yes
no を指定するとテキスト入力フィールド内でのスクロールも制限される。
device-width
デバイスの幅(ピクセル値)。
device-height
デバイスの高さ(ピクセル値)。

–制作メモ

ご自由にどうぞ