はじめに
Web制作において、スマートフォンやタブレットといった画面サイズの異なるデバイスに対応するためには、HTMLにおける <meta name="viewport"> の設定が重要です。
この記事では、特に次のように書かれる定番の設定：
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
について、自分の学びのために整理した個人用備忘録です。
書こうと思ったきっかけ
スマホ表示でページがやたらと縮小されて見づらいと感じたのがきっかけです。
個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。
CSSやレスポンシブ設定をどれだけ頑張っても、そもそも <meta> の設定がなければ、意図通りに表示されないことに気づきました。
内容の説明
width=device-width とは？
ユーザーのデバイス（スマホやPCなど）の画面幅をそのまま反映するという指定。
これがないと、スマホ表示でもブラウザはデスクトップ向けの幅（例：980pxなど）でレンダリングしようとしてしまう。
initial-scale=1.0 とは？
ページが最初に読み込まれたときのズーム倍率を設定する。
1.0 は等倍（つまりズームなし）で表示することを意味する。
これがないと、初期表示が縮小されて文字が小さくなってしまうことも。
よくある落とし穴
-
<meta>の指定が<head>内にない、または順番が遅くてCSSが先に読み込まれてしまっている -
width=1024などと固定していると、スマホでレイアウト崩れ
まとめ
- モバイル対応の基本はまずこの1行から：
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> - CSSのレスポンシブ設計が効かない場合、まずはこれを確認する
- ユーザーのデバイスに合わせた表示をするための第一歩
自分でHTMLを書くときは、必ずこの行を入れるように習慣づけておきたいと思いました！
関連記事