Chrome M40 では、ビューポートに変更が加えられています。この変更は非常に微妙ですが、ユーザーにとって大きな違いをもたらすはずです。
モバイル ブラウザが登場した当初、ビューポート メタタグがないと、ウェブページは画面領域が約 980 ピクセルであると想定され、このサイズでレンダリングされていました。デベロッパーはビューポート メタタグを使用して幅を定義できます。最も一般的な値は「device-width」で、画面サイズをデバイスのサイズに設定します。詳しくは、ウェブの基礎をご覧ください。
リック バイアーズ氏は仮想ビューポートを次のように説明しています。仮想ビューポートの考え方は、「ビューポート」の概念を「レイアウト ビューポート」(固定位置のアイテムが配置されるビューポート)と「ビジュアル ビューポート」(ユーザーが実際に見るビューポート)の 2 つに分割することです。
超シンプルな例
ウェブサイト videojs.com は、アプリバーが画面上部に固定され、アプリバーの左右の両側にリンクがあるため、良い例です。
以下の画像は、サイトをズームインして左右にパンした場合に表示される内容を示しています。
上位のデバイスは Chrome M39 で、仮想ビューポートはありません。下位の 3 つは Chrome M40 で、仮想ビューポートがあります。


Chrome M39 では、ズームインするとアプリバーが表示されますが、右にスクロールしてもバーの右側のリンクは表示されず、ロゴのみが表示されます。
これは、Chrome M40(「仮想ビューポート」がある)と比較すると、[ビジュアル ビューポート] は [レイアウト ビューポート] 内のすべてをスクロールし、右側のリンクを表示できることがわかります。
Internet Explorer ではすでにこの動作が実装されており、今回の変更により、Chrome も Internet Explorer に近づきます。
html
デベロッパーに影響する唯一の大きな変更点は、M39 では html 要素に overflow: hidden を適用してもページがスクロールされたのに対し、M40 ではこれがサポートされなくなり、ページがスクロールされなくなることです。
より確実な情報
もっと詳しく知りたいですか?
以下のスライド資料をご覧ください。