調整網址列的大小

David Bokan

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%99vhposition:fixedposition:absolute 組合。隱藏網址列,就能顯示網址列受到的影響。頁面下方會列出調整大小事件。

支援

  • Chrome 56 Android 版。