はじめに

Web制作において、スマートフォンやタブレットといった画面サイズの異なるデバイスに対応するためには、HTMLにおける <meta name="viewport"> の設定が重要です。

この記事では、特に次のように書かれる定番の設定：

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

について、自分の学びのために整理した個人用備忘録です。

書こうと思ったきっかけ

スマホ表示でページがやたらと縮小されて見づらいと感じたのがきっかけです。

個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。

CSSやレスポンシブ設定をどれだけ頑張っても、そもそも <meta> の設定がなければ、意図通りに表示されないことに気づきました。

ユーザーのデバイス（スマホやPCなど）の画面幅をそのまま反映するという指定。
これがないと、スマホ表示でもブラウザはデスクトップ向けの幅（例：980pxなど）でレンダリングしようとしてしまう。

ページが最初に読み込まれたときのズーム倍率を設定する。
1.0 は等倍（つまりズームなし）で表示することを意味する。
これがないと、初期表示が縮小されて文字が小さくなってしまうことも。

モバイル対応の基本はまずこの1行から：

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

自分でHTMLを書くときは、必ずこの行を入れるように習慣づけておきたいと思いました！