調整網址列的大小

David Bokan

Android 上的 Chrome 56 以上版本將變更網址列的大小調整行為。使用須知:

根據可視區域單位 (例如 vh) 中定義的長度,系統不會根據要顯示或隱藏的網址列調整大小。相反地,vh 單元會調整為可視區域高度,就像一律隱藏網址列一樣。也就是說,vh 單位的大小將調整為「最大可視區域」。也就是說,當網址列顯示時,100vh 會大於可見高度。

初始包含區塊 (ICB) 是包含的區塊,用於根據父項調整元素大小。舉例來說,為 <html> 元素設定 width: 100%; height: 100% 的樣式後,該元素的大小就會與 ICB 相同。這項變更生效後,當網址列處於隱藏狀態時,ICC 就不會調整大小。 但會保持不變,就像網址列一律顯示「可能的最小可視區域」一樣。也就是說,在隱藏網址列時,大小符合 ICB 高度的元素不會完全填滿可見高度。

上述變更有一個例外情況,也就是 position: fixed 的元素。行為保持不變。也就是說,如果 position: fixed 元素內含區塊為 ICB,就會根據顯示或隱藏網址列來調整大小。舉例來說,如果高度為 100%,則無論網址列是否顯示,都一律會填滿可見高度。同樣地,vh 長度也會將網址列位置納入考量,以符合顯示高度,以符合顯示高度。

造成這項異動的原因如下:

  • 行動裝置上可用的 vh 廣告單元。在此之前,使用 vh 單元,表示每當使用者變更捲動方向時,頁面都會重排。

  • 改善使用者體驗。如果頁面在使用者閱讀期間自動重排,可能會遺失文件中的相對位置。這會造成困擾,但也可能增加處理器用量和電池耗電,導致重新配置和重新繪製頁面。

  • 改善 iOS 版 Safari 的互通性。新模型應與 Safari 的行為相符,讓網頁程式開發人員的生活更加輕鬆。其實,選擇將 vh 單元設為最大的可能可視區域是不直覺的選擇,但 ICB 要最小的可能性是配合 Safari 的行為。

在全螢幕情境中,如果網址列鎖定為隱藏狀態,ICB 會使用全螢幕高度。這與上述定義一致,因為「最小的可視區域」會是完整的可視區域,因為網址列不會在捲動時顯示。

示範

  • 請查看示範。頁面右側四個長條是 99%99vhposition:fixedposition:absolute 在可捲動頁面提供的全部組合。隱藏網址列,就能查看網址列的影響。調整大小的事件會顯示在頁面下方。

支援

  • Chrome 56 Android 版。