スマートフォン最適化 「viewport」
2011.01.04
この記事は最終更新日から1年以上が経過しています。
最適化に必須の表示制御タグ「viewport」
「viewport」というmeta要素の属性を使って、表示制御できる。
「viewport」で指定出来る属性
width : viewportの横幅
height : viewportの縦幅
initial-scale : 倍率の初期値
minimum-scale : 倍率の最小値
maximum-scale: 倍率の最大値
user-scalable : 拡大縮小の可否
例:
<meta name="viewport" content="width=500" />
<meta name="viewport" content="width=device-width" />
数値以外にもデバイスの幅、高さという指定も可能
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=0.5,maximum-scale=3" />
拡大縮小指定する場合は、カンマで区切り複数指定する。
初期倍率100% 拡大、縮小は50%〜300%
<meta name="viewport" content="width=device-width,user-scalable=no" />
拡大縮小を許可しない場合