モバイルデバイスのほとんどのブラウザは、実際のディスプレイと一致しない仮想ビューポートを使用しています。これが役立つ理由はいくつかありますが、私が思うに最も重要なのは次のとおりです。
- 小さなデバイスは、通常の古い学校のWebページがデスクトップ画面用のレイアウトを壊さないように、十分に大きいように見える場合があります。
- これは、HTMLレンダリングエンジンがページの現在表示されている部分よりも多くレンダリングするために使用され、スムーズなスクロールとズームを可能にします。
しかし、これは私が思ういくつかの標準化された行動の期待を破ります。
- 特に、ページはその表示領域を認識しないため、ポップアップや通知などのJSを利用したものは正しく機能しなくなります。
- ユーザーが要素をビューに移動すると、埋め込まれたリソース（サムネイル、ビデオオブジェクト、エンドレスリストなど）のオンデマンドロードが中断されるようです。
- また、レイアウトを適応させるJSでの不安定な動作も紹介します。たとえば、ページのレイアウトを適応させるonresizeハンドラーは、ページサイズを簡単に変更できるため、ビューポートのサイズを変更すると、onresizeイベントが繰り返しトリガーされる可能性があります。
これをまだ壊れているがいつか修正された動作と見なして、壊れたすべてのページの小さな回避策に固執する必要がありますか、またはonresize、window.innerWidthなどに期待を落とし、より静的なレイアウトに戻って、ビューポートのアイデアはもうありませんか？