自 Chrome 56 版起,Android 版 Chrome 的網址列大小調整行為將有所變更。使用須知:
以檢視區單位 (即 vh
) 定義的長度,不會根據顯示或隱藏網址列而調整大小。相反地,vh
單元會以可視區域高度為準,就像網址列一律隱藏一樣。也就是說,vh
單元會調整至「可用的最大可視區域」大小。也就是說,當網址列顯示時,100vh
會比可見高度還要大。
初始包含區塊 (ICB) 是相對於父項來設定元素大小時使用的根包含區塊。舉例來說,如果將 <html>
元素的樣式設為 width: 100%; height: 100%
,則其大小會與 ICB 相同。這項變更後,當網址列隱藏時,資訊工具列就不會調整大小。相反地,它會維持相同高度,就像網址列一律會顯示 (稱為「最小可視區」)。也就是說,如果元素的大小與 ICB 高度相同,在網址列隱藏時,元素就不會完全填滿可見高度。
上述變更有一個例外狀況,即元素為 position: fixed
時。行為則維持不變。也就是說,如果 position:
fixed
元素的包含區塊為 ICB,則會根據網址列顯示或隱藏狀態調整大小。舉例來說,如果高度為 100%
,無論是否顯示網址列,都會一律填滿可見高度。同樣地,對於 vh
長度,系統也會將網址列位置納入考量,並調整大小以符合可視高度。
這項異動的原因如下:
可在行動裝置上使用的
vh
單元。在此之前,使用vh
單位會導致每次使用者變更捲動方向時,頁面都會發生劇烈的重新流動。改善使用者體驗。如果使用者在閱讀時遇到網頁重新流動,可能會在文件中失去相對位置。這不僅令人沮喪,還會導致處理器使用量增加,並耗用電池重新排版及重新繪製網頁。
改善與 iOS 版 Safari 的互通性。新模型應與 Safari 的行為相符,讓網頁程式開發人員更輕鬆地處理。為了配合 Safari 的行為,我們選擇讓
vh
單位成為盡可能大的 viewport,而 ICB 則是盡可能小的 viewport,這項選擇雖然不直覺,但確實有效。
在全螢幕情境中,網址列會鎖定為隱藏狀態,ICB 會使用全螢幕高度。這與上述定義一致,因為「最小可視區域」會是完整可視區域,因為網址列不會在捲動時顯示。
示範
- 以下是示範。頁面右側的四個列是可在可捲動的頁面上提供的
99%
、99vh
、position:fixed
和position:absolute
的所有可能組合。隱藏網址列後,您可以看到隱藏網址列對各項功能的影響。調整大小事件會列印在頁面底部。
支援
- Android 版 Chrome 56。