Android 上的 Chrome 自 56 版起,網址列的大小調整行為將有所異動。使用須知:
系統不會依照可視區域單元 (例如 vh
) 中定義的長度,根據顯示或隱藏的網址列調整大小。而是將 vh
單位的大小調整為可視區域高度,就像一律隱藏網址列一樣。也就是說,vh
單位將調整為「最大可視區域」。這表示當網址列顯示時,100vh
會大於可見高度。
初始包含區塊 (ICB) 是內含區塊,用來根據父項調整元素大小。舉例來說,如果將 <html>
元素的樣式設為 width: 100%; height: 100%
,樣式就會與 ICB 相同。這項異動實施後,在隱藏網址列時 ICB 不會調整大小。
而會保持與網址列持續顯示時的高度 (「最小的可視區域」)。也就是說,在隱藏網址列時,根據 ICB 高度調整的元素不會完全填滿可見高度。
上述變更有一個例外情況,也就是 position: fixed
的元素。行為維持不變。也就是說,包含區塊為 ICB 的 position:
fixed
元素會調整大小,以回應顯示或隱藏的網址列。舉例來說,如果其高度為 100%
,則無論是否在網址列顯示,一律都會填滿可見的高度。同樣地,若 vh
長度也會納入考量,也會根據網址列位置的可見高度調整大小。
有幾個原因會造成這項異動:
行動裝置上可用的
vh
廣告單元。在此之前,如果使用vh
單位,則當使用者變更捲動方向時,頁面就會不動。改善使用者體驗。如果在使用者閱讀時頁面重排,可能會失去文件中的相對位置。這會令人不快,但也會造成額外的處理器用量和電池耗電,以便重新配置頁面並重新繪製頁面。
改善與 iOS 版 Safari 的互通性。新模型應符合 Safari 的運作方式,讓網頁開發人員的生活更加便利。最簡單的選擇將
vh
單位設為最大的可視區域,但 ICB 的最小範圍則是配合 Safari 的行為。
在全螢幕情境中,網址列鎖定為隱藏狀態時,ICB 會使用全螢幕高度。這與上方的定義一致,因為「最小的可視區域」會是完整的可視區域,因為捲動時不會顯示網址列。
操作示範
- 按這裡查看示範。頁面右側四條線是在可捲動頁面上提供的所有
99%
、99vh
、position:fixed
和position:absolute
組合。隱藏網址列,就能顯示網址列受到的影響。頁面下方會列出調整大小事件。
支援
- Chrome 56 Android 版。