レスポンシブウェブページデザイン - ビューポート

視口とは何ですか？

視口（viewport）はユーザーがウェブページ上で見える領域です。

視口はデバイスによって異なり、携帯電話上ではコンピュータのスクリーンよりも小さいです。

タブレットやスマートフォンが登場する前に、ウェブページはコンピュータのスクリーンにのみ設計されており、静的なデザインと固定サイズが一般的でした。

それから、私たちがタブレットやスマートフォンでウェブを使い始めたとき、固定サイズのウェブページは視口に適さず大きすぎます。この問題を解決するために、これらのデバイスのブラウザは、スクリーンサイズに合わせて全体のウェブページを縮小します。

これは完璧ではありません！急場の修正に過ぎません。

視口を設定することで、

HTML5は、Webデザイナーが <meta> タグを含め、視口を制御してください。

すべてのウェブページに以下の <meta> 視口要素：

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

これは、ブラウザにページのサイズと拡大率をどのように制御するかに関する指示を提供します。

width=device-width 部分はページの幅をデバイスのスクリーン幅に設定します（デバイスによって異なります）。

ブラウザがページを初めて読み込んだとき、initial-scale=1.0 部分設定初期拡大レベル。

以下は、視口メタタグを含まないウェブページと、含むウェブページの例です：

ヒント：如果您使用手机或タブレットでこのページを閲覧している場合、以下の2つのリンクをクリックして違いを確認できます。



没有视口元标记


带有视口元标记

将内容调整到视口的大小

用户习惯在台式机和移动设备上垂直滚动网站，而不是水平滚动！

因此，如果迫使用户水平滚动或缩小以查看整个网页，则会导致不佳的用户体験。

以下是一些需要遵循的附加规则：

1. 大きい固定幅の要素を使用しないでください - 例えば、画像の幅がビューポットの幅を超えると、ビューポットの水平スクロールが発生する可能性があります。この内容をビューポットの幅に合わせて調整してください。

2. 内容は特定のビューポット幅に依存して良い効果を呈現すべきではありません - CSS ピクセル単位のスクリーンサイズと幅はデバイス間で非常に異なるため、内容は特定のビューポット幅に依存して良い効果を呈現すべきではありません。

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