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