レスポンシブデザインを適用させるため用いるviewport
いつも、魔法の言葉のように以下の記述を書いて、レスポンシブデザインを適用させていたので 少し深ぼって調べてみました。
<meta name="viewport" content="width=device-width,initial-scale=1.0">
viewportは表示領域のことで、webページの横幅がviewportとなります。このビューポートを指定し忘れて、私のwebページをスマホで見た際に、文字などがとても小さく表示されてしまいました。
width=device-viewport とは、閲覧している画面サイズに合わせてサイズ変更するという意味になります。
initial-scaleとは、そのページが表示されてたときの倍率の設定です。指定しない場合は、デフォルトでは1に設定されます。
ほとんど下記の記事内容を、復唱させていただいた形になりますが、大変分かりやすかったです。
参考文献
