モバイル環境でのviewport

背景

以下のような指定がよくある。これがなぜ必要か？メモしておく。

code:html

<meta name="viewport" content="width=device-width, initial-scale=1.0">

viewport について

HTML レンダリングにおける viewport とは、ユーザから見える Web コンテンツの範囲のこと。デスクトップ PC 上のブラウザだと、これはブラウザの表示サイズに依存して決定される。Web コンテンツの描画範囲は大抵 viewport より広範であり、ユーザはスクロールバーなどを活用して Web コンテンツ全体を閲覧できる。

が、モバイル端末における viewport には、デスクトップ環境と比較してちょっとした工夫がある。モバイル端末のスクリーンサイズはデスクトップ PC よりとても小さい。よって、デスクトップ PC 向けに作られた Web コンテンツをオリジナルのサイズで表示すると、とても見辛くなってしまう。

https://gyazo.com/c8dbdc91ea0dce5070b2925364ebda40

そこで、モバイル端末のブラウザは、まず仮想の viewport に Web コンテンツを描画し、それを端末のスクリーンサイズに縮小して表示する。

https://gyazo.com/dc62c5f786a7333c5ab4f864f2cab562

この時の仮想の viewport の横幅は、デフォルトで 980px。例えば、スクリーン幅が 320px の端末で Web コンテンツを表示しようとした場合、まず Web コンテンツが仮想 viewport に幅 980px で描画された後に、その描画内容が 320px に縮小して表示される。

Mobile browsers render pages in a virtual window or viewport, generally at 980px, which is usually wider than the screen, and then shrink the rendered result down so it can all be seen at once

viewportのサイズを指定しないと困るケース

モバイル端末では、デフォルトだと幅 980px の仮想 viewport に Web コンテンツが描画されるが、これだと困るケースがいくつかある。

1つは、Web コンテンツが幅 980px より狭いために、余白ができてしまう場合。このような場合には、仮想 viewport のサイズを Web コンテンツに適した値に固定したい。

https://gyazo.com/870e559c70755719ba11c554c8138d71

viewport meta タグ

仮想 viewport の幅を設定できるのが、viewport meta タグである。

以下のような Web コンテンツがあるとする。デフォルトだと幅 980px でレンダリングされている。

https://gyazo.com/c03b645d955f6ba5a33ab12480177caf

これに対し、以下のような meta タグを指定すると、仮想 viewport の幅をスクリーン幅と同一にすることができる。

code:html

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

https://gyazo.com/b00821e203400235404fe812771e9500

あるいは、仮想 viewport の幅を固定値にすることもできる。以下は、320px に固定した場合。

code:html

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

https://gyazo.com/78d48f58402d9a18ac237fdd53b01800

他にもスケールを指定することなどができるが、いずれの場合も最終的には、ロジックに基づいて仮想 viewport の幅を算出し、それを用いて Web コンテンツを描画することになる。アルゴリズムについては、下記を参照。

参考