viewportの設定
スマホはうその画面幅を名乗る
前回はみ出しを止めたのに、実機で見ると文字が小さいままのことがあります。理由はスマホ側のしくみにあります。
昔のサイトはパソコン向けにしか作られていませんでした。そのままスマホで開くと横にはみ出してしまうので、スマホのブラウザは「自分は 980px 幅の画面です」と名乗り、ページ全体を縮小して表示するようになりました。おかげでレイアウトは崩れませんが、文字は読めないほど小さくなります。
viewport で本当の幅を伝える
この縮小をやめさせるのが viewport の meta タグです。
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">width=device-width が「ページの幅は端末の実際の幅と同じにしてください」という意味です。これで 980px のふりがなくなり、375px の端末では 375px として扱われます。initial-scale=1.0 は最初の表示倍率を等倍にする指定で、開いた瞬間にズームされた状態になるのを防ぎます。
書くこと
<head> の中、<meta charset="UTF-8"> のすぐ下にこの 1 行を書き足します。今回はこの章で唯一の HTML の変更です。
この 1 行が無いと、次に学ぶメディアクエリも正しく効きません。ブラウザが 980px だと思い込んでいるので、画面幅で分岐しても常に広い画面あつかいになってしまうからです。レスポンシブ対応の出発点になる、いちばん大事な 1 行です。
課題
<head>の中に viewport の meta タグを書き足すcontentをwidth=device-width, initial-scale=1.0にする