はじめに
Webサイトを表示する時に、PCから表示するのとスマホから表示するのとで見た目が異なるように実装することはよくあります。
このような実装をするためには、cssファイルで「画面の幅が何px以上or以下ならこのように表示」といった設定を行います。
いわゆる「レスポンシブデザイン」という手法です。
しかし、それだけでは上手く動きません。HTMLファイルに以下の文章を記述する必要があります。
<meta name="viewport" content="width=device-width,initial-scale=1">
意味が分からなくても、とりあえずコピペすれば動くには動くのですが、この一文は何を意味するのか？というのを調べてみました。
スマホの画面幅について
特に設定をしなかった場合、スマホでブラウザからWebサイトなどを閲覧すると、ブラウザは実際の画面サイズにかかわらず、「画面幅が980pxである」前提で表示してしまいます。
ですがスマホの画面幅は実際には400から500pxぐらいですから、文字サイズが小さくなったりして、見にくくなってしまうわけです。
ビューポートの設定
そこで、「ブラウザの横幅=デバイスの画面幅」となるように設定を行う必要があります。
しかし、ブラウザの横幅は変えることができません。
そのため、ブラウザ上に「ビューポート」という領域を作成し、その上に描画していく、という方法がとられます。
ビューポートは幅や表示倍率を設定することができ、content="width=device-width,initial-scale=1"の部分がそれに該当します。
ちなみに、initial-scaleは1を設定する場合は省略することができます。
まとめ
まとめると
<meta name="viewport" content="width=device-width,initial-scale=1">
というHTML文は、
「ブラウザ上にビューポートという領域を作り、その上で描画を行います。ビューポートの幅はデバイスの幅と同じです」
という意味になります。
