【HTML】viewportについて解説してみた

前提

アウトプットを目的として学んだことをそのまま記事に起こしています。
間違った内容がありましたらご指摘ください。

概要

ほとんどのサイトに記述されている

<meta name="viewport" content="width=device-width">

というmetaタグ。

オンライン学習教材などでもこのタグの説明がされている教材がたくさんあると思います。それくらい基本的なことではあります。

しかし、上記のコードさえ書けば特に問題は起きないので詳細まで説明されているものは少ないです。

ということで、構造を理解すればカスタマイズもできるようになるので、以下に詳細の値について1つずつ解説していきます。

目次

1. viewportとは？
2. viewportに設定できる値
3. viewportの最適値
4. まとめ

viewportとは？

viewportは「表示領域」を意味します。
ブラウザの表示の仕方を制御する役割があります。

PCの場合、viewport = ブラウザのウィンドウ
スマホ/タブレットの場合、viewport = デバイスの画面全体

モバイルのviewportを指定しない場合

デスクトップのPCで表示される横幅 = モバイル端末の横幅
として合わせてしまいます。

iPhone11 Proでの画面⬇︎

こんな感じです。

つまり、PCで見てるサイトをスマホなどで閲覧した時にそのまま縮小された非常に小さいサイズで閲覧することになります。

よって、

<meta name=“viewport” content=“width=device-width>

を設定することで、端末やブラウザに合わせた値を返すことができます。

viewportに設定できる値

① width (横幅)

• 初期値：960px
• 単位(px)：記述不要です。
• 指定可能範囲：200px ≦ width ≦ 10000px
• width=device-width：様々なサイズのデバイスに応じた表示領域に設定・できる。

② height (縦幅)

• 初期値：横幅とのアスペクト比(※)から計算される値
• 単位(px)：記述不要です。
• 指定可能範囲：200px ≦ height ≦ 10000px
• 補足：widthと同様、device-widthを設定できますが、そもそもheightを記述することはほとんどありません。

③ initial-scale

• 意味：初期倍率
• 初期値：1
• 非対応：Internet Exproler
• 補足：未指定の場合、自動的に「initial-scale=1.0」となります。指定した場合でも、「initial-scale=1.0」とすれば、結果は変わりません。width=divice-widthが基準となるためです。

④ minimum-scale (最小倍率) (※)

• 意味：最小縮小倍率
• 初期値：0.25
• 指定可能範囲：0 < minimum-scale < 10
• 補足：「initial-scale」と同時に指定不可

⑤ maximum-scale (最大倍率) (※)

• 最大確率倍率
• 初期値：1.6
• 指定可能範囲：0 < maximum-scale < 10

⑥ user-scalable

• 意味：ユーザーがズームすることを許可するかどうかを指定できます
• 初期値：yes
• 指定可能な値：yes / no または 1 / 0 (1 = yes / 0 = no)
• 補足：デバイスによって全く効果がない場合がある

⑦ target-densitydpi

• 指定：旧版のAndroid端末向け
• 意味：ターゲットとなる画面密度を表します。「target-densitydpi=device-dpi」とすると、端末ごとに表示される文字サイズも大きく変わってしまいます。対策として「target-densitydpi=medium-dpi」に設定するか、記述しないかでいいと思います。

⑧ その他

• viewport-fit
• shrink-to-fit

etc…

他にも指定可能な値があるみたいです。スマホを横向きにした時の対応などですね。しかし指定の必要はあまりないかと…。

※アスペクト比とは…

短形における長辺と短編の比率。

アスペクト比にも色々あるので、気になる方はWikipediaの記事を参照してください。

他の記事には「アスペスト比」と書かれている記事がいくつかありますが、アスペストで検索しても「アスペクト比」としか出てこなかったのでこの記事では「アスペクト」と記述しています。

※④ ⑤ について

自分は正直なところ記述したことがありません。initial-scale=1.0も数値を変えたことがありません。ご自身で様々試してみてください。

viewportの最適値

<meta name="viewport" content="width=device-width, initial-scale=1.0">

特別な理由がなければ、基本この記述だけで問題ないです。
設定などを理解していればこのコードをコピペで使いまわしていいと思います。

まとめ

• viewportは、表示領域のこと
• <meta name="viewport" content="device-width">さえ記述すれば基本的に問題ない