レスポンシブWebデザイン - ビューポート
ビューポートとは何ですか?
ビューポートは、Webページのユーザーの可視領域です。
ビューポートはデバイスによって異なり、携帯電話ではコンピューター画面よりも小さくなります。
タブレットや携帯電話が登場する前は、Webページはコンピューター画面専用に設計されており、Webページは静的なデザインと固定サイズであることが一般的でした。
その後、タブレットや携帯電話を使用してインターネットをサーフィンし始めたとき、固定サイズのWebページは大きすぎてビューポートに収まりませんでした。これを修正するために、これらのデバイスのブラウザーはWebページ全体を画面に合わせて縮小しました。
これは完璧ではありませんでした!!しかし、迅速な修正です。
ビューポートの設定
HTML5では、Webデザイナーが<meta>タグを通じてビューポートを制御できるようにする方法が導入されました。
すべてのWebページに次の<meta>ビューポート要素を含める必要があります。
これにより、ページのサイズとスケーリングを制御する方法がブラウザーに指示されます。
width=device-width部分は、デバイスの画面幅に従うようにページの幅を設定します (これはデバイスによって異なります)。
initial-scale=1.0の部分は、ページがブラウザによって最初に読み込まれるときの初期ズームレベルを設定します。
以下は、ビューポートメタタグのないWebページと、ビューポートメタタグのある同じWebページの例です。
ヒント：このページを携帯電話またはタブレットで閲覧している場合は、上の2つのリンクをクリックして違いを確認してください。
コンテンツのサイズをビューポートに合わせる
ユーザーは、デスクトップとモバイルデバイスの両方でWebサイトを縦方向にスクロールすることに慣れていますが、横方向ではありません。
そのため、ユーザーがWebページ全体を表示するために水平方向にスクロールしたりズームアウトしたりする必要がある場合、ユーザーエクスペリエンスが低下します。
従うべきいくつかの追加ルール:
1. 大きな固定幅要素を使用しないでください -たとえば、画像がビューポートよりも広い幅で表示されている場合、ビューポートが水平方向にスクロールする可能性があります。ビューポートの幅に収まるように、このコンテンツを調整することを忘れないでください。
2. 適切にレンダリングするためにコンテンツが特定のビューポート幅に依存しないようにする- 画面の寸法と CSSピクセル単位の幅はデバイスによって大きく異なるため、コンテンツを特定のビューポート幅に依存して適切にレンダリングすることはできません。
3. CSSメディアクエリを使用して、小さな画面と大きな画面に異なるスタイルを適用する- ページ要素のCSS絶対幅を大きく設定すると、小さいデバイスのビューポートに対して要素が広すぎます。代わりに、width:100%などの相対的な幅の値を使用することを検討してください。また、大きな絶対位置指定値の使用には注意してください。小さいデバイスでは、要素がビューポートの外に出る可能性があります。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。