ビューポートとは何ですか?

ビューポートは、Webページのユーザーの可視領域です。

ビューポートはデバイスによって異なり、携帯電話ではコンピューター画面よりも小さくなります。

タブレットや携帯電話が登場する前は、Webページはコンピューター画面専用に設計されており、Webページは静的なデザインと固定サイズであることが一般的でした。

その後、タブレットや携帯電話を使用してインターネットをサーフィンし始めたとき、固定サイズのWebページは大きすぎてビューポートに収まりませんでした。これを修正するために、これらのデバイスのブラウザーはWebページ全体を画面に合わせて縮小しました。

これは完璧ではありませんでした!!しかし、迅速な修正です。

ビューポートの設定

HTML5では、Webデザイナーが<meta>タグを通じてビューポートを制御できるようにする方法が導入されました。

すべてのWebページに次の<meta>ビューポート要素を含める必要があります。

これにより、ページのサイズとスケーリングを制御する方法がブラウザーに指示されます。

以下は、ビューポートメタタグのないWebページと、ビューポートメタタグのある同じWebページの例です。

コンテンツのサイズをビューポートに合わせる

ユーザーは、デスクトップとモバイルデバイスの両方でWebサイトを縦方向にスクロールすることに慣れていますが、横方向ではありません。

そのため、ユーザーがWebページ全体を表示するために水平方向にスクロールしたりズームアウトしたりする必要がある場合、ユーザーエクスペリエンスが低下します。

従うべきいくつかの追加ルール:

1. 大きな固定幅要素を使用しないでください -たとえば、画像がビューポートよりも広い幅で表示されている場合、ビューポートが水平方向にスクロールする可能性があります。ビューポートの幅に収まるように、このコンテンツを調整することを忘れないでください。

2. 適切にレンダリングするためにコンテンツが特定のビューポート幅に依存しないようにする- 画面の寸法と CSSピクセル単位の幅はデバイスによって大きく異なるため、コンテンツを特定のビューポート幅に依存して適切にレンダリングすることはできません。

3. CSSメディアクエリを使用して、小さな画面と大きな画面に異なるスタイルを適用する- ページ要素のCSS絶対幅を大きく設定すると、小さいデバイスのビューポートに対して要素が広すぎます。代わりに、width:100%などの相対的な幅の値を使用することを検討してください。また、大きな絶対位置指定値の使用には注意してください。小さいデバイスでは、要素がビューポートの外に出る可能性があります。