CSS ビューポート

CSS ビューポートモジュールにより、ユーザーエージェントの初期包含ブロック、すなわちビューポートのサイズ、ズーム率、および方向を指定することができます。

大きなビューポート向けに設計されたコンテンツは、小さなビューポートで表示した際に、意図しない場所で改行したり、コンテンツが切り取られたり、スクロールコンテナーのサイズが不適切になったりと、さまざまな不具合が生じる可能性があります。HTMLには、ビューポートの初期サイズに関するヒントを提供するためのビューポートメタタグ、<meta name="viewport"> が用意されています。サイトが小さなビューポートでの表示に対応していない場合、かつこのタグが指定されていない場合、一部のモバイルブラウザーでは、初期の包含ブロックの幅を固定（通常は 980px）にしてサイトを表示します。その後、コンテンツが変倍され、CSSピクセルサイズが実際のピクセルサイズよりも小さくなります。その結果、ページは利用できる画面の領域に収まりますが、文字が読めなくなり、ユーザーはコンテンツを表示するためにズームやスクロールを行う必要があります。

連続メディアにおけるビューポートの初期の包含ブロックは、ビューポートと同じサイズになります。ビューポートは一般的に画面よりも大きくないため、スマートフォンやタブレットなど画面の小さい端末では、デスクトップやノートパソコンなどの大型端末に比べて、通常、ビューポートのサイズが小さくなります。