ViewPort

ViewPortとは

Viewportとは表示領域のことで、ブラウザにおける仮想のカンバスサイズを決めて、サイトの表示の仕方を制御する役割があります。

PCで作成したサイトを、スマートフォンで表示すると、全体が小さく縮小され、ピンチアップしないと見づらい状況が発生します。 (スマートフォンの解像度がPCなみに上がってきたため。ViewPortを設定＋メディアクエリを設定することで、高い解像度時かつ小さい画面でも、表示の仕方を制御することができます。)

スマートフォンデバイスに関しては、レスポンシブデザインでレイアウトを行う際には、CSSでメディアクエリを、HTMLでViewportを両方設定しておく必要があります。 これは、メディアクエリだけを指定したとしても、Viewportがなければ何も起こらないからです。

①widthに数値を制定

<meta name="viewport" content="width=480">

・幅480pxの仮想的なウインドウが作られる ・はみ出した分はみえない ・数字を明確に指定しているので端末ごとの表示を統一できるが、
逆に言うと大きな画面サイズの端末でも小さな画面サイズの端末と同じ表示になるため、スペースの有効活用ができない ・モバイル端末の幅よりもViewportの幅のほうが小さいか同じであれば、スマートフォンサイトとしてストレスなく閲覧することができる

②widthにdevice-widthを設定

<meta name="viewport" content="width=device-width">

・端末やブラウザアプリ毎によって異なる ・解像度ではなく360とか580などのスマホらしい小さい値が使われる ・フレキシブルな表示ができる一方、細かい表示の統一はやりづらい

参考サイト https://ferret-plus.com/6033

ViewPortの設定は、ブラウザ毎で書き方が違うようなので、注意が必要です。