<meta name="viewport" content="width=device-width, initial-scale=1"> は、スマホ対応（レスポンシブデザイン）をする上で非常に重要な設定です。これを設定しないと、スマホでサイトを開いたときに適切なサイズで表示されず、ユーザーがズームしないと読めないようなデザインになることがあります。
Contents
各属性の意味
<meta name="viewport" content="width=device-width, initial-scale=1">このタグの意味を細かく分解すると、以下のようになります。
name="viewport"width=device-widthinitial-scale=1
name="viewport"
この name 属性は、meta タグが ビューポート（画面の表示領域）を制御するためのものであることを示します。
"viewport"以外に指定できるものはありません。ですので、これを必ず入れると覚えてしまいましょう。
width=device-width
width=device-widthは、 ビューポートの幅をデバイスの物理的な画面幅と同じにする という設定です。- 例えば、スマホの画面幅が 375px（iPhone 13 mini）だった場合、ビューポートの幅も 375px に設定されます。
- これがないと、デフォルトではPC向けのレイアウトが適用され、スマホでも 980px などの幅で表示されてしまいます（縮小されて見にくくなる）。
"width=device-width"以外にも指定できるものが存在します。それらはこちら、もじくは以下のページをご覧ください。
initial-scale=1
- 初期ズーム倍率を1倍 に設定します。
1は「デフォルトの縮尺」という意味で、例えば0.5にするとズームアウトされて画面が小さく表示され、2にするとズームインされます。- これを指定しないと、一部のブラウザでは適切なズーム倍率にならず、ユーザーが手動でズームしないと見づらいことがあります。
追加のオプション
meta viewport には、以下のような追加のオプションも設定できます。
maximum-scaleuser-scalable
この辺も先ほどのページで詳しく解説していますのでそちらもご覧ください。
maximum-scale
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">- ズームの最大倍率を
1に固定します。 - これは、ユーザーがピンチイン・ピンチアウトでズームできないようにするための設定です。（アクセシビリティの観点では、あまり推奨されません）
user-scalable
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">user-scalable=noにすると、ユーザーがズームできなくなります。- これもアクセシビリティの観点では推奨されず、一般的には使わない方がよいです。
まとめ
<meta name="viewport" content="width=device-width, initial-scale=1"> は、
スマホ対応をするために
「ビューポートの幅をデバイスの画面幅に合わせる」 ことと
「初期倍率を1倍にする」 ことを設定する重要なタグです。
レスポンシブデザインを適切に適用するためには、基本的にこの設定を入れておくのが望ましいです。
コメント