レスポンシブWebデザインを行う前に知っておくViewportについて
まとめ
- スマートフォンのブラウザはViewportのサイズで表示される
- Viewport ≠ 物理的な画面サイズ
- Viewport＝仮想ウインドウのこと
スマートフォンのブラウザはViewportのサイズで表示される
ViewportとはiOSやAndroidなどのOSで使用されている仮想ウインドウのこと。
例えば、iPhone11のディスプレイ仕様には下記のように書かれている。
物理的な画面サイズ6.1インチ(正確には6.06インチ)
1,792 x 828ピクセル解像度、326ppi
どういうことかと言うと、
iPhone11を使用し、ブラウザでWebサイトを表示したとき、
1792×828の仮想ウインドウでWebサイトをレンダリングし、
6.1インチ(896×414)の物理的な液晶に表示をしている。ということ
この仮想ウインドウ(Viewport)と物理的な液晶のサイズが異なることによって、
"レイアウトの表示崩れ"や"文字の過剰な縮小"が起こる。
詳細な説明はこちらの記事がわかりやすかった。
もう逃げない。HTMLのviewportをちゃんと理解する - Qiita
レスポンシブWebデザインを行うときはどうすればいいのか
対策としてはViewportの横幅を物理的な液晶のサイズに合わせるのが基本。
上記の例で言えば、
iPhone11を使用し、ブラウザでWebサイトを表示したとき、
Viewportの幅を物理的な液晶の幅に設定しておくことによって、
896×414の仮想ウインドウでWebサイトをレンダリングし、
6.1インチ(896×414)の物理的な液晶に表示する。
ちなみにViewportの幅の設定はHTMLのmetaタグで行う。
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
metaタグについては下記のリンクを参考
