VisualViewport / LayoutViewport 検証
スクロール、iOS のソフトウェアキーボード表示、ピンチズーム時に 2つのビューポート領域を見分けるためのページです。
青の実線が LayoutViewport、 オレンジの破線が VisualViewport です。
LayoutViewport
VisualViewport
フォーム
iOS で入力フォーカス時のキーボード表示を確認しやすいように、 入力欄を複数配置しています。
スクロール確認エリア 1
ここまでスクロールすると、各ビューポートの枠が文書全体に対して どこを指しているかが見やすくなります。
中央エリア
VisualViewport API が利用できる環境では、ズームやキーボード表示に応じて オレンジの領域が変化します。
LayoutViewport はレイアウト基準のため、VisualViewport と一致しない状態を 比較できます。
スクロール確認エリア 2
ページ下部でもフォーム入力やズームを行い、上部との挙動差を観察できます。
下部フォーム
ページ下部にも入力欄を置いているため、スクロール位置が深い状態での ビューポート変化も確認できます。