レスポンシブ・リキッドレイアウトのサイトを作るにあたって、
<meta name="viewport" content="width=device-width, initial-scale=1.0">この設定をやっていれば問題なく作れますが、
今回viewportのプロパティがどのような意味で設定されているのかしっかり理解するためにも僕なりのわかりやすい言葉でまとめました。
今回のゴール
- viewportの設定は何がされているのか理解
- 今後は自信をもってコピペをする(笑)
viewport とは？
viewportは、表示領域についての指定が行える。
『<meta name=”viewport” content=””>』の 『content』プロパティに表示領域についての値を指定していきます。
プロパティの複数指定する場合は、カンマ(,)で連結します。
viewport のプロパティに指定できるものは？
width の指定
表示領域の横幅についての指定を行えます。
初期値
- 960
説明
- 200 〜 10000 を指定
- 『device-width』で画面の横幅に合わせる指定
height の指定
表示領域の高さについての指定を行えます。
初期値
- 横幅との適切な比率の値が指定される
説明
- 233～10000 を指定
- 『device-height』で画面の高さに合わせる指定
initial-scale の指定
初期表示した時の、拡大率を指定が行えます。
初期値
- 『initial-scale=1』となっており、『1』が指定されています。
説明
- 拡大率を0 〜 10の数値で指定が行えます。
- ただし、後述の minimum-scale(最小倍率指定) 〜 maximum-scale(最大倍率指定) の間の数値に限定されています。
minimum-scale の指定
表示の最小の縮小率を指定できます。
初期値
- 0.25
説明
- 最小の縮小率が指定できて、0 〜 10 の数値が指定できます。
maximum-scale の指定
表示の最大の拡大率を指定できます。
初期値
- 1.6
説明
- 最大の拡大率が指定できて、0 〜 10 の数値が指定できます。
user-scalable の指定
ユーザーが拡大・縮小のズーム操作ができるかの指定ができます。
初期値
- yes
説明
- ズーム操作を許可するかは、 『yes』(許可する)か『no』(許可しない)で指定できます。
- 『yes』は『1』、『no』は『0』として指定できます。
まとめ
<meta name="viewport" content="width=device-width, initial-scale=1.0">つまり この指定は、
viewportを
- 横幅は画面サイズに合わせて (width=device-width)
- 初期拡大率は 1.0 (等倍)にする指定 (initial-scale=1.0)
ということになります。
これで、自信をもってコピペできます！
