Viewportについて

2012-07-27

スマートフォンごとに違う画面サイズをそれぞれの画面サイズに合わせるのがviewportです viewportはMETAタグで指定を行います。

ちなみにIPHONEのviewportの初期値は横幅980pxに設定されています。 そのためviewportの指定がないHTMLを表示させると非常に文字が小さくなってしまいます。

viewportの記述例

<meta name="viewport" content="プロパディ1=値1, プロパディ2=値2 ...">

 

※viewportで指定できるプロパディ
width 幅。デフォルトは980px。範囲は200pxから10000pxまで。device-widthを指定できる。
height 高さ。デフォルト値は980px。範囲は223pxから10000pxまで。device-heightを指定できる。
initial-scale 初期スケール。デフォルトはWebページを可視エリアにフィットさせる。
範囲はminimum-scaleとmaximum-scaleから測定される
minimum-scale 最小スケール。デフォルトは0.25。範囲は0から10.0まで。
maximum-scale 最大スケール。範囲は0から10.0まで。
user-scalable ユーザーが拡大・縮小できるかどうかをyes/noで指定

記述例

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=3.0" />

以上です。

Facebook