【HTML】とりあえず入れる meta viewportを図で理解する
はじめに
VSCodeのEmmet（! → Enter）でHTMLの雛形を作ると、当たり前に入ってくるこの1行。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
「レスポンシブ対応のために必要」――それは知ってる。
でも、width=device-width と initial-scale=1 を 自分の言葉で 説明しようとすると、ちょっと曖昧になりませんか。
この記事では、meta viewportが何をしているのかを図で解説します。
まず、viewport（ビューポート）って何？
viewportとは、ブラウザがWebページを表示するための「見える領域」 のことです。
viewportには、次の2種類があります。
- ① レイアウトビューポート：CSSのレイアウト計算に使われる仮想的な領域
- ② ビジュアルビューポート：ユーザーが画面上で実際に見ている領域
PCでは通常、レイアウトビューポートとビジュアルビューポートの幅がほぼ同じなので、両者の違いを意識する場面は多くありません。
一方、スマホやタブレットなどのモバイル端末では、meta viewportの設定によって両者の幅が大きく異なることがあります。
そのため、モバイル端末向けの表示を理解するうえでは、この2種類を区別することが重要です。
meta viewportを図で解説
コードを属性ごとに解説するとこうなります👇
-
meta name="viewport"
このメタ情報の種類が viewport（表示領域に関する設定） だよ、という指定。 -
width=device-width
① レイアウトビューポートを、② ビジュアルビューポートに合わせます。
これがないと、モバイルブラウザがPC向け幅（例：980px付近 ※端末/ブラウザで差あり）でレイアウトして縮小表示することがあります。 -
initial-scale=1.0
読み込み直後の表示倍率を1倍（100%）にします。
つまり最初は「等倍」で表示される、という指定です。
meta viewportがないとき
meta viewport がないと、モバイルブラウザは PC向けページだとみなし、
①レイアウトビューポートが広め（例：980px付近）に設定されてしまいます。
そのため ②ビジュアルビューポート（スマホなら例：375px）と一致せず、
画面幅に収めるために全体が縮小表示され、文字やUIが小さく見えます。
初期表示の倍率も指定されないため、表示の判断はブラウザ側に委ねられます。
meta viewportがあるとき
meta viewport があると、モバイルブラウザは 端末の画面幅に合わせて表示してOKと判断 して、
①レイアウトビューポートが端末幅（スマホなら例：375px）に設定されます。
そのため②ビジュアルビューポート（スマホなら例：375px）と一致し、縮小されず等倍（初期表示） になります。
また initial-scale=1.0 により、初期表示は1倍（等倍）として扱われます。
まとめ
-
viewportには、PC・スマホ・タブレットのいずれにも2種類ある
- レイアウトビューポート：レイアウト計算に使う仮想の幅
- ビジュアルビューポート：実際に見えている幅
-
PCでは通常、この2つの幅がほぼ同じなので、違いを意識する場面は少ない
-
スマホやタブレットなどのモバイル端末では、meta viewport がないとレイアウト幅が広め（例：980px付近）になり、画面幅に収めるために縮小表示される
-
meta viewport を入れると、レイアウト幅がモバイル端末の幅に揃い、初期表示は等倍になる
普段は当たり前に入れている1行ですが、理由は意外と忘れがちです。
また曖昧になったときは、この記事を見返してサッと説明できる状態にしておきたいです。
Discussion