Android 版 Chrome のバージョン 56 以降、URL バーのサイズ変更動作が変更されます。Super Stickers の概要:
ビューポートの単位（vh）で定義された長さは、URL バーの表示 / 非表示に応じてサイズ変更されません。代わりに、vh ユニットは、URL バーが常に非表示であるかのように、ビューポートの高さに合わせてサイズ調整されます。つまり、vh ユニットは「表示可能な最大のビューポート」にサイズ調整されます。つまり、URL バーが表示されたときの 100vh は、表示の高さよりも大きくなります。
Initial Containing Block（ICB）は、親を基準として要素のサイズを設定する際に使用される、ルートを含むブロックです。たとえば、<html> 要素のスタイルを width: 100%; height: 100% に設定すると、ICB と同じサイズになります。この変更により、URL バーが非表示になっていても ICB のサイズは変わりません。
高さは URL バーが常に表示されていたときと同じになります（「表示可能な最小のビューポート」）。つまり、ICB の高さにサイズ変更された要素は、URL バーが非表示の間、表示される高さに完全には収まらないということです。
上記の変更には例外が 1 つあります。それは、要素が position: fixed の場合です。動作に変更はありません。つまり、ICB を含むブロックを含む position:
fixed 要素は、URL バーの表示または非表示に応じてサイズ変更されます。たとえば、高さが 100% の場合は、URL バーが表示されるかどうかにかかわらず、常に視認可能な高さに完全に合わせられます。vh の長さについても同様に、URL バーの位置を考慮して、表示の高さに合わせてサイズが変更されます。
この変更には次のような理由があります。
モバイルで使用可能な
vhユニットです。以前は、vh単位を使用すると、ユーザーがスクロール方向を変更するたびにページが不自然なリフローでリフローされていました。ユーザー エクスペリエンスの向上。ユーザーが閲覧中にページがリフローすると、ドキュメント内の相対的な位置が失われる可能性があります。これは不便ですが、ページの再レイアウトと再描画のためにプロセッサの使用量が増加し、バッテリーの消耗も生じます。
iOS での Safari との相互運用性を改善しました。新しいモデルは Safari の動作と適合し、ウェブ デベロッパーの作業負担が軽減されます。
vhユニットを可能な限り最大のビューポートにするという直感的な選択はありませんが、ICB を可能な限り最小にするのは、Safari の動作に合わせるためです。
URL バーが非表示状態にロックされている全画面表示のシナリオでは、ICB は全画面の高さを使用します。これは上記の定義と同じです。スクロール時に URL バーが表示されないため、「表示可能な最小のビューポート」とはビューポート全体のことです。
デモ
- デモをご覧ください。
ページの右側にある 4 本のバーは、スクロール可能なページで提供される
99%、99vh、position:fixed、position:absoluteのすべての組み合わせです。URL バーを非表示にすると、それぞれの影響が表示されます。サイズ変更イベントがページ下部に出力されます。
サポート
- Android 版 Chrome 56