viewportとは
- ブラウザに表示領域を設定させるための機能です。
- PCでなくスマホやタブレットにのみ適用されます。
<meta name="viewport"
content="width=device-width,
initial-scale=1.0,
minimum-scale=0.1
maximum-scale=8
user-scalable=yes">各パラメータ
width
PCとスマホでは画面全体の扱いが異なります。
＜PCの場合＞
PCではブラウザのウィンドウの幅がそのままwidth:100%となります。
ウインドウをリサイズすることで幅も変わってきます。
＜スマホの場合＞
スマホの場合、ウィンドウが存在しないため、デバイスの幅を利用してwidth:100%としたいです。
それがwidth=device-widthの指定。
deviceが550pxならwidth:100%=550px, deviceが400pxならwidth:100%=400となります。
widthには固定幅を指定することもできますが、指定するメリットがありません。
initial-scale
初期値：１？／ 範囲：minimum-scale ~ maxmum-scale
初期表示の倍率を設定できる。よほどのことがない限り1.0固定にしましょう。
minimum-scale
初期値：0.25 ／ 範囲 ：0 ~ 10
ピンチインによる画面の縮小倍率を設定できます。
縮小するとコンテンツのサイズも小さくなるのでユーザにストレスを与えそうです。
これも1.0(縮小なし)ですむようにHPを設計すべきなのでしょう。
maximum-scale
初期値：1.6 ／ 範囲：0 ~ 10
ピンチアウトによる画面の拡大倍率を設定できます。
視力の低い方などに対して有効そうではありますが、
最大で10倍まで拡大できますが、10倍に拡大する必要がある時点で
もともとのコンテンツが小さすぎということになります。
個人的な経験則として、2倍以上に拡大できるサイトを見たことがないので
せいぜい1 ~ 2にとどめるのがよさそうです。
user-scalable
初期値：yes
拡大・縮小を許可するかどうか。
noの場合、minimum-scale, maximum-scaleに1.0を設定するのと同じです。
動作テスト
実際に見てみるとより理解が深まりますので、何パターンかのサンプルを用意してみました。
スマホで閲覧してください。
1.user-scalable=no
2.ini=1.0 min=0.5 max=1.5
3.ini=2.0 min=0.25 max=4.0
4.width=600
参考サイト