Android 版 Chrome では、バージョン 56 以降、URL バーのサイズ変更動作が変更されます。Super Stickers の概要:
ビューポート単位（vh など）で定義された長さは、URL バーの表示または非表示に応じてサイズ変更されません。代わりに、vh ユニットは、URL バーが常に非表示であるかのようにビューポートの高さに調整されます。つまり、vh ユニットのサイズは「最大可能なビューポート」に設定されます。つまり、100vh は、URL バーが表示されているときに表示される高さよりも大きくなります。
初期包含ブロック（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。