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