ビジュアルビューポートとレイアウトビューポートの違いは何ですか？
IPhone/iPadなどのモバイルデバイスのビジュアルビューポートとレイアウトビューポートの違いは何ですか？
私は多くのオンラインリソースを調べてきましたが、それについてはまだ不明です。
ビジュアルビューポートは、現在画面に表示されているページの一部です。
レイアウトビューポートは、ビジュアルビューポートよりもかなり広くすることができ、画面に表示される要素と表示されない要素が含まれています。
レイアウトビューポートが、サイズや形状が変化しない大きな画像であると想像してください。ここで、大きな画像を見るための小さなフレームがあるとします。小さなフレームは不透明な素材で囲まれているため、大きな画像の一部を除いてすべてが見えにくくなっています。フレームを通して見ることができる大きな画像の部分は、ビジュアルビューポートです。フレームを押しながら大きな画像から離れて（ズームアウト）一度に画像全体を表示したり、より近くに移動（ズームイン）して一部だけを表示したりできます。フレームの向きを変更することもできますが、大きな画像（レイアウトビューポート）のサイズと形状は変更されません。
この問題の優れた扱いについては、以下を参照してください http://www.quirksmode.org/mobile/viewports2.html
2つの非常に良い説明が見つかりますここ。
要約すれば：
ビジュアルビューポート
ビジュアルビューポートは、現在画面に表示されているページの一部です。ユーザーはスクロールして、表示するページの一部を変更したり、ズームしてビジュアルビューポートのサイズを変更したりできます。
レイアウトビューポート
ただし、CSSレイアウト、特にパーセント幅は、レイアウトビューポートと比較して計算されます。これは、ビジュアルビューポートよりもかなり幅が広くなっています。
したがって、要素は最初にレイアウトビューポートの幅を取得し、CSSは画面が電話画面よりも大幅に広いかのように解釈されます。これにより、サイトのレイアウトがデスクトップブラウザと同じように動作します。
レイアウトビューポートの幅はどれくらいですか？それはブラウザごとに異なります。 Safari iPhoneは980px、Opera 850px、Android WebKit 800px、およびIE 974pxを使用します。
つまり、レイアウトビューポートは通常、画面がズームアウトされたときのビューポートの幅です。
レイアウトビューポート
その測定値は、方向やズームレベルに関係なく常に同じです。デバイス/ブラウザウィンドウに依存します。
ビジュアルビューポート
変化します（たとえば、ズームした場合）。これは、任意の時点で画面に実際に表示されるページの部分です。
両方のレイアウトのビデオ例
レイアウトビューポート：ミニマップの緑の領域。
ビジュアルビューポート：ミニマップの赤いボックス。
モバイル/タブレットデバイス
モバイルデバイスでは、「完全なWeb」体験を可能にするために、多くのモバイルデバイスが偽の高いレイアウトビューポート寸法。
たとえば、クラシックiPhoneのデフォルトでは、layout viewport幅が980pxと報告されます。これは、iPhoneで320px要素を作成した場合、画面領域の約3分の1しか占めないことを意味します。
ただし、このメカニズムは、メディアクエリを使用して狭い画面用に最適化されたページにはあまり適していません。
レスポンシブWebサイトを作成する場合、ビューポートメタタグを使用すると非常に便利です。これにより、多くのデバイスのスケーリングとレイアウトビューポートを制御できます（偽のレポートではなく実際の寸法を使用）。
<meta name="*viewport*" content="*width=device-width*, initial-scale=1, maximum-scale=1" />
ビューポートメタタグの例
ヒント：このページを携帯電話またはタブレットで閲覧している場合は、下の2つのリンクをクリックして違いを確認できます。
