headのtitleタグ付近に書いている以下のコードがなんなのか改めてざっくり読み解いていく。
<meta name="viewport" content="width=device-width,initial-scale=1" />
viewportとは
viewportとは表示領域のことで、ブラウザ上に仮想な画面をサイズを指定
スマートフォン等のPC以外のデバイスに対応するために設定が必要になる。
安直に上記のmetaを設定したもので挙動がどう変わるのか比較
例：viewport設定なし
例：viewport設定あり(width=device-width,initial-scale=1)
PCでの表示は変わらないが、スマートフォンでの表示が全然異なる。
このことからレスポンシブサイトを作る上で必要なことがわかりました！
本題： contentの中身を読み解く
width
- 表示領域の幅を指定
- 今回の題材の
device-widthは、使っているデバイスの幅に合わせて設定が可能になります。 - 数値指定の場合、適切にしないとCSSのメディアクエリ設定が適切に動作しないため数値指定することがあまりないのかなと思う。
例：width=375を指定(スマホサイズに合わせる)
initial-scale
- ズーム倍率の初期を指定
-
width=device-widthを指定した場合、デフォルトで1になるため省略しても良さそう -
maximum-scaleやminimum-scaleで最大と最小の倍率を指定可能
user-scalable(今回は不使用)
- ユーザー側のズームの操作の許可するかどうかの設定
- iPhoneのピンチイン/アウトがこの操作にあたる
最後に
よく書いているけど、
なぜこれを毎回書いているのかがざっくり理解できたのでとりあえずよしとする。