ビューポートの設定方法
正しいビューポートの設定方法は、ビューポートがあることで、デバイスにあわせて Web ページの表示方法を制御することができます。設定が行われていない場合、 PC 画面に合わせてページ全体が縮小表示されるため、文字サイズが小さくて読みづらい、タップもし づらくて使いにくい Web ページとなってしまいます。 解決策としては、 head 内部に meta viewport 要素を記述することで、
ブラウザに指示を与えることができます。
width=device-width を記述して、画面の幅をデバイス非依存ピクセルに合わせる width=device-width を使用すると、モバイル用と PC 用のどちらでレンダリングしでも、それぞれの画面サイズに合わせて、ページ内のコン
テンツをリフローすることができます。 しかし、 width=device-widthの部分を width = 320のように何か 特定の数値(固定幅)で指定した場合のように PageSpeed Insightsで指摘を受けます 。固定サイズとビュ ーポー卜を正しく設定する。端末のサイズに関わりなく、どんなものであっても対応できる Web サイトにするよう Google は促しているのです。これは、さらなるマルチデバイスの時代を予見しているともいえます。