Viewportについて
viewportを使えば
Webブラウザーの横幅
(表示領域)
をWebアプリから指定できる
Webアプリ側で
Webブラウザーの
表示領域のサイズ
拡大、縮小操作の可否
拡大率などを指定すれば
スマホの設定や画面サイズの違いを
気にせずに意図した表現ができる
Viewportで指定可能なプロパティは
width
表示する幅
有効範囲 200~10000px
デフォルトだと980
device-width
なら
ハードウェアの画面幅になる
height
表示する高さ
223~10000pxまでが有効範囲
デフォルトだと980
device-heightで
ハードウェアの画面の高さ
minimum-scale
最小スケール
0~10.0までが有効範囲
デフォルトは 0.25
maximum-scale
最大スケール
0~10.0までが有効範囲
initial-scale
初期スケール
範囲は
minimum-scale
maximum-scaleから測定
デフォルトだと、
表示領域に応じ自動調整
user-scalable
ユーザーが拡大、縮小できるかどうかを
yes noで指定