仮想ビューポートとは

Chrome M40 では、ビューポートに軽微な変更が加えられていますが、ユーザーにとっては大きな違いがあります。

当初、モバイル ブラウザにはビューポートのメタタグがないため、ウェブページは約 980 ピクセルの画面領域があると認識され、このサイズでレンダリングされていました。デベロッパーはビューポートのメタタグを使用して幅を定義できます。最も一般的なのは「device-width」で、画面サイズはデバイスの画面サイズに設定されます。詳しくは、ウェブの基礎をご覧ください。

Rick Byers は、仮想ビューポートを次のように説明しています。仮想ビューポートとは、「ビューポート」という概念を、「レイアウト ビューポート」(固定位置のアイテムがアタッチされている)と「視覚的なビューポート」(ユーザーが実際に目にするもの)の 2 つに分割することです。

非常にシンプルな例

ウェブサイト videojs.com はその良い例です。アプリバーが上部に固定され、アプリバーの左右の両方にリンクがあるからです。

以下の画像は、サイトを拡大して左右にパンした場合に表示される画像です。

上のデバイスは仮想ビューポートのない Chrome M39 で、下の 3 つは仮想ビューポートを備えた Chrome M40 です。

モザイク レンダリング。
モザイク レンダリング。

Chrome M39 では、ズームインするとアプリバーが表示されますが、右にスクロールしてもバーの右側のリンクは表示できず、ロゴのみが表示されます。

これを「仮想ビューポート」を備えた Chrome M40 と比較すると、「ビジュアル ビューポート」では「レイアウト ビューポート」内のすべてがスクロールされ、右側のリンクが表示されます。

Internet Explorer にはすでにこの動作があり、この変更により、より厳密に一致するようになりました。

html

これに伴って開発者が直面する主な変更点は、M39 では overflow: hidden を html 要素に適用でき、ページは引き続きスクロールされることです。M40 ではサポートが終了し、ページがスクロールされなくなります。

詳細な情報

もっと詳しく知りたいってこと?

下のスライドをご覧ください