ビューポートは、Web ページの表示領域です。
ビューポートは、デバイスによって異なり、コンピュータ画面よりもスマホは小さくなります。
タブレットやスマホの以前には、web ページはコンピュータ画面用にのみ設計され、web ページは静的なデザインと 固定サイズであることが一般的でした。
その後、タブレットやスマホを使ってのインターネットサーフィンが始まったときに、固定サイズの Web ページでは、 ビューポートに合わせるには大きすぎました。この問題を解決するために、これらのデバイスのブラウザは 画面に合わせて web ページ全体を縮小することになりました。
これは完璧なものではなく、単なる応急処置でした。
HTML5 は、<meta> タグを通して、web デザイナがビューポートのコントロールを行えるような方法を導入しました。
すべての Web ページに、次の <meta> ビューポート要素をインクルードする必要があります：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta> ビューポート要素は、ページの dimension と scaling を制御する方法をブラウザに指示します。
width=device-width の部分は、（デバイスにより異なる）デバイスの画面幅に従うようにページの幅を設定します。
initial-scale=1.0 の部分は、ページがブラウザにより最初にロードされた時のズームレベルを設定します。
ここに、ビューポート・メタタグなしの Web ページと、ビューポート・メタタグを持つ同じ Web ページの例があります：
チップ:スマホやタブレットでこのページを閲覧している場合、違いを確認するために 2 つのリンクをクリックしてください。
Users は、デスクトップと携帯で web サイトを縦に - 横にではなく！ - スクロールするために使用されます。
従って、ユーザが、Web ページ全体を見るために、横スクロールやズームイン、ズームアウトを強制的に行えば、 それは悪いユーザ・エクスペリエンスをもたらします。
いくつかの追加のルールは次の通りです：
1. 大きな固定幅の要素を使用しない - 例えば、画像がビューポートよりも広い幅で表示されている場合、 ビューポートを横方向にスクロールすることができるようになりますが、ビューポートの幅に収まるように、このコンテンツを調整することを忘れないでください。
2. コンテンツをうまく描画するために特定のビューポートの幅に依存しない - CSS ピクセルによる画面の大きさと幅は、 デバイス間で広く変化するので、コンテンツをうまく描画するためには、特定のビューポートの幅に依存しないでください。
3. 小型および大型画面用に異なったスタイルを適用するCSSメディアクエリを使用する - ページ要素に、CSS で大きな絶対値を設定すると、より小さな機器のビューポートにとっては広すぎることになります。 その代わりに、width: 100% のように相対的な幅の値を使用するようにしてください。 また、大きな絶対配置の値にも注意してください。これは、小型デバイスでは、要素がビューポートから外れる恐れがあります。
