🙆
【HTML】viewport への理解を深める
本記事の目的
この記事は、viewport への理解を深めることを目的に、
- なぜ viewport を設定するの？
- viewport の設定はどうすればいい？
といった疑問を解消します。
結論
- なぜ viewport を設定するのか：デバイスの大きさに合わせたレイアウトを行うため
- viewport の設定はどうすればいいのか：
<meta name="viewport" content="width=device-width,initial-scale=1">
なぜ viewport を設定するのか？
そもそも viewport とは、現在表示しているコンテンツの部分のことを指します。
上記の画像のように、タブやメニューバーなどのブラウザのUIを除いた部分が、viewportです。
viewport の役割は、HTMLから画面を作るときに必要となる「画面のサイズ」として使われます。
<meta name="viewport" content="width=580">
この場合だと、580px の画面でHTMLを作成します。
その後、デバイスの大きさで表示されるように拡大・縮小されます。
このとき、設定された viewport の大きさとデバイスの大きさが、かけ離れていると、見にくくなってしまいます。例えば、PCの画面をスマホで見た場合です。
viewportの設定が適切でないと、上記の左側のように小さく表示されてしまいます。
しかし、viewport をデバイスの大きさに合わせることで、右側のように十分な大きさで表示されます。
そのため、viewport をデバイスの大きさに自動で合わせる
<meta name="viewport" content="width=device-width,initial-scale=1">
という設定がよく使われます。
このように、viewport を設定することで、デバイスの大きさに合わせたレイアウトを行うための下準備が出来ます。
補足：「viewport と デバイスの解像度の関係」について。
結論として、デバイスの解像度とviewport は関係ありません。
viewport のサイズは、CSSピクセルという単位で決められいます。
CSSピクセルは、どの解像度のデバイスでも同じ大きさで表示します。
そのため、viewport のサイズは、デバイスの解像度に依存しません。
詳しく知りたい方は、以下のサイトをご覧ください。
viewport の使い方は？
結論：
<meta name="viewport" content="width=device-width,initial-scale=1">
プロパティの説明
- width：
width=600にすると、px値。device-widthにすると、100vwになるように設定される - initial-scale：ページを最初に読み込んだときの拡大・縮小倍率を設定。１が基準値
他のプロパティ
- height：
height=600にすると、px値。device-heightにすると、100vhになるように設定される -
minimum-scale：ページの縮小倍率の最大値を設定 -
maximum-scale：ページの拡大倍率の最大値を設定 -
user-scalable：ページの拡大・縮小の無効化・有効化を設定
参考資料
Discussion