Android 版 Chrome 邊到邊遷移指南

Bramus

發布日期：2025 年 2 月 28 日

無邊框顯示是 Android 功能，可讓應用程式在 Android 系統資訊列後方繪製，跨越整個螢幕寬度和高度。

在 Chrome 135 之前，Android 版 Chrome 不會繪製無邊框設計。本指南將說明這項異動對網站的影響，以及開發人員可以採取哪些行動來因應。

隨處可見的酒吧

Android 隨附作業系統本身提供的系統資訊列。

狀態列、說明文字列和導覽列統稱為系統資訊列。可顯示電池電量、時間和通知快訊等重要資訊，並讓你隨時隨地直接與裝置互動。

畫面頂端是狀態列，其中包含通知圖示和系統圖示。

畫面底部會顯示導覽列，你可以使用返回、主畫面和總覽控制項進行導覽。可以是傳統的三按鈕操作列，也可以是現代的手勢操作列。

除了 Android 系統資訊列外，Chrome 本身也提供網址列，可隨著捲動動作動態展開和收合。

Chrome 無邊框

瀏覽網站時，網站會顯示在稱為「版面配置檢視區塊」的矩形中。

在 Chrome 135 之前的 Android 版 Chrome 中，該版面配置檢視區塊會繪製在頂端狀態列和底部手勢導覽列之間。Chrome 網址列的存在與否可能會影響可視區域的大小，但可視區域絕不會擴展至頂端系統資訊列或底部手勢操作列。

從 Chrome 135 開始，檢視區塊可延伸至 Android 的手勢操作列。這就是所謂的「無邊框」行為。

無邊框顯示行為的 Chrome

以下錄影畫面顯示 Android 版 Chrome 未支援無邊框設計，因此當網頁捲動時，頂端的 Chrome 網址列會動態移開。不過，Android 原生的頂端狀態列和底部的 Android 原生導覽列仍會固定在原位。

在這裡，版面配置可視區域的大小會隨著 Chrome 網址列收合或展開而改變。

無邊框模式下的 Chrome 行為

從 Chrome 135 開始，Chrome 可將檢視區塊延伸至手勢操作列區域，將網頁內容繪製至裝置底部邊緣。

動態無邊框設計，底部有「下巴」

根據預設，Chrome 無邊框設計會在手勢操作導覽列區域上方，顯示新的動態底部列 (又稱「下巴」)。就像 Chrome 網址列一樣，這個下巴會在您開始捲動時移開，並影響可視區域的大小。

在下列 Android 版 Chrome 錄影畫面中，Chrome 支援無邊框設計，因此當網頁向下捲動時，Chrome 網址列和下巴都會動態收回。這會導致檢視區塊擴大，讓網頁內容繪製到裝置底部邊緣。

自 Chrome 135 起，這項下巴行為是 Chrome 的新預設行為。

預設採用無邊框設計，但可選擇停用

如果網站是為無邊框設計而建構，可以調整 viewport 中繼標記來指明。啟用後，視埠預設會延伸至底部邊緣，不會顯示下巴。

網頁可以使用 viewport 中繼標記及其 viewport-fit 鍵，指出網頁支援無邊框設計。

如要選擇採用無邊框設計，請將 viewport-fit 設為 cover 的值。

<meta name="viewport" content="width=device-width, initial-scale=1, viewpo>rt-fit=cover" /

如要進一步瞭解 viewport-fit 的各種值，請參閱 MDN。

處理可能遭手勢操作列遮住的內容

在無邊框模式中，請考慮手勢操作導覽列可能會遮住的內容。

在大多數情況下，底部下巴會自行移開，因此你不需要採取任何行動。使用者仍可像以往一樣存取網站上的所有內容。

不過，如果您選擇預設啟用無邊框模式，或是將元素放置在檢視區塊底部，可能需要考慮內容遭到遮蓋的情況。

.stuck-to-the-bottom-of-the-viewport {
  position: fixed;
  bottom: 0;
}

下巴出現時，使用者一開始可以存取內容，但下巴消失後，Android 導覽列會遮住內容。

如要緩解這個問題，請使用安全區域插邊，將受影響的元素一律放置在 Android 原生底部手勢操作導覽列上方，或將這些元素的背景延伸至該區域。

安全區域插邊

安全區域插邊是四個環境變數，可定義矩形，方法是從可視區域邊緣插入頂端、右側、底部和左側。

這四個值合併後，會形成安全區域矩形，可安全地放置內容，不會遭到 Android 手勢導覽列等項目遮蔽。

使用安全區域底部插邊

如要將元素放置在可視區域底部，請使用 bottom 屬性的 safe-area-inset-bottom 值，避免元素放置在手勢操作導覽列下方。當下巴移開時，safe-area-inset-bottom 傳回的值會動態更新，因此位於底部的元素會整齊地保持在 Android 手勢操作列上方。

.stuck-to-the-bottom-of-the-viewport {
  position: fixed;
  bottom: env(safe-area-inset-bottom, 0px);
}

如插圖所示，結果尚未臻於完美：下巴移開後，剩餘的頁面內容會顯示在手勢操作資訊列區域。這是因為在這種狀態下，可視區域會延伸至手勢操作導覽列區域。

如要避免內容繪製在以底部為錨點的內容下方，常見的做法是將 padding-bottom 設為 safe-area-inset-bottom。這樣一來，當下巴隱藏時，以底部為錨點的元素就會自動變大。雖然這個方法可行，但我們不建議採用，因為下巴移開時會導致版面配置輾轉現象。

請勿將 padding 設為安全區域插邊值。

.stuck-to-the-bottom-of-the-viewport {
  position: fixed;
  bottom: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px); /* 🛑 Don't do this, as it causes layout thrashing. */
}

使用安全區域底部插邊和安全區域底部最大插邊

建議改用「safe-area-inset-bottom」和「safe-area-max-inset-bottom」的組合。動態 safe-area-inset-bottom 會在下巴移開時動態更新，而 safe-area-max-inset-bottom 則代表 safe-area-inset-bottom 的最大值。

使用這個 safe-area-max-inset-bottom 預先放大以底部為錨點的元素，並與 safe-area-inset-bottom 結合，將元素往下拉，使其位於下巴後方。

搭配使用 safe-area-max-inset-bottom 和 safe-area-inset-bottom

:root {
  --safe-area-max-inset-bottom: env(safe-area-max-inset-bottom, 36px);
  --bottom-bar-height: 50px;
}

.stuck-to-the-bottom-of-the-viewport {
  position: fixed;
  bottom: 0;
  height: var(--bottom-bar-height);
  padding-bottom: var(--safe-area-max-inset-bottom);
  bottom: calc(env(safe-area-inset-bottom, 0px) - var(--safe-area-max-inset-bottom));
}

body {
  padding-bottom: calc(var(--bottom-bar-height) + var(--safe-area-max-inset-bottom));
}

試用即時示範模式

視覺結果與 padding-bottom: env(safe-area-inset-bottom, 0px); 方法相同，但效能大幅提升。由於下巴移開時，只需要變更 bottom 的計算值，因此不會發生版面配置垃圾。

在 Chrome 135 之前試用無邊框設計

如要在正式穩定版發布前試用無邊框設計，您需要透過 chrome://flags 啟用許多 Chrome 功能旗標：

• EdgeToEdgeBottomChin(可選擇設為「Enabled Debug」，將下巴一半塗成粉紅色，以便更清楚地與其他 UI 區別)
• DrawCutOutEdgeToEdge
• BottomBrowserControlsRefactor (請勿設為「Enabled」，而是設為「Enabled Dispatch yOffset」)
• DynamicSafeAreaInsets
• DynamicSafeAreaInsetsOnScroll
• EdgeToEdgeWebOptIn
• DrawKeyNativeEdgeToEdge
• EdgeToEdgeSafeAreaConstraint(請勿設為「已啟用」，而是設為「已啟用可捲動的變化版本」)

確認未啟用下列旗標：

• DrawNativeEdgeToEdge
• EdgeToEdgeEverywhere

兩次重新啟動 Chrome。

我們需要你的意見回饋

如果您對 Chrome 和無邊框實作有任何意見，請在「UI > Browser > Mobile > EdgeToEdge」元件中提出 Chromium 錯誤。感謝您提供意見。