Android 版 Chrome 邊到邊遷移指南

Bramus

發布日期：2025 年 2 月 28 日

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

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

注意：Chrome 135 的異動適用於小螢幕裝置。目前不支援在大型螢幕裝置上執行的 Android 版 Chrome，但日後推出的 Chrome 版本將會支援。

注意：這項功能會透過 Chrome 變化版本推出。因此您可能會在舊版 Chrome 中看到這項功能。

所有平台

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

狀態列、說明文字列和導覽列統稱為系統資訊列。資訊方塊會顯示電池電量、時間和通知快訊等重要資訊，並提供直接與裝置互動的功能，無論在何處都能使用。

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

Android 狀態列醒目顯示 (來源)。

畫面底部是導覽列，可讓你使用返回、主畫面和總覽控制項來控制導覽。可以是傳統的三按鈕操作列，也可以是新式手勢操作列。

手勢操作列 (來源)。

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

Chrome 採用無邊框設計

當您造訪網站時，該網站會顯示在稱為「(版面配置) 檢視區」的矩形中。

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

Chrome 135 之前，Android 版 Chrome 的可視區域大小下限和上限。這些大小稱為小型和大型可視區域。檢視區本身有藍色虛線外框。

從 Chrome 135 開始，可將可視區域延伸至 Android 的手勢操作列。這種行為稱為「無邊框」。

Android 版 Chrome 顯示的大型可視區域，左側為非無邊框，右側為無邊框。在支援無邊框模式的 Chrome 中，當 Chrome 的動態工具列收合時，可視區域會延伸至手勢操作列區域。

注意：iOS 版 Chrome 自 iOS 11.3 起支援無邊框模式。本指南中的建議也適用於在 iOS 上執行的 Chrome。

Chrome 行為 (非無邊框)

以下錄製內容顯示 Android 版 Chrome 不支援無邊框模式，Chrome 的網址列 (位於頂端) 會在頁面捲動時動態移開。不過，Android 原生頂端狀態列和 Android 原生底部導覽列仍會固定在原位。

舊行為：Android 版 Chrome 不支援無邊框，且已載入 https://developer.chrome.com/。

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

Chrome 的無邊框顯示行為

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

動態無邊框螢幕，底部有邊框

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

在以下 Android 版 Chrome 錄製內容中，Chrome 網址列和下巴都會隨著頁面向下捲動而動態縮回。這會導致可視區域展開，讓網路內容繪製到裝置底部邊緣。

新行為：Android 版 Chrome 支援無邊框模式，並載入 https://developer.chrome.com/。請注意，當頁面捲動時，底部下巴會滑出畫面。

自 Chrome 135 起，這項底部列行為將成為 Chrome 的新預設行為。

預設採用無邊框設計，並提供選擇加入選項

專為無邊框設計的網站可以調整 viewport 中繼標記，表示其支援無邊框。啟用後，可視區域預設會延伸至底部邊緣，不會顯示下巴。

啟用無邊框顯示後的新行為：網頁載入時，可視區域會延伸至底部邊緣。沒有下巴。

網頁可以使用 viewport 中繼標記和 viewport-fit 鍵，表示支援無邊框模式。

如要啟用無邊框模式，請將 viewport-fit 設為 cover 的值。

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

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

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

在無邊框模式下，您應考量手勢操作列可能遮擋的任何內容。

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

不過，如果您選擇預設採用無邊框模式，或有元素位於可視區域底部，可能需要考量該內容是否會遭到遮蓋。

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

顯示下巴時，使用者一開始可以觸及內容，但下巴消失後，Android 導覽列會遮住內容。

網站插圖，底部元素設有「bottom: 0」。當下巴可見時，底部元素會位於 Android 導覽列上方。當下巴移開時，元素會位於 Android 導覽列後方，此時導覽列會部分遮住元素。

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

安全區域內嵌

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

這四個值會組合成安全區域矩形，您可以在這個區域中安全地放置內容，以免內容遭到 Android 手勢操作列等項目遮擋。

Chrome 無邊框模式的插圖，檢視區和安全區域矩形以黃色標示。由於下巴已縮回，安全區域底部插邊可防止安全區域矩形延伸至手勢操作列。因此，您會看到可視區域從手勢操作列下方露出。

使用安全區域底部插邊

對於位於可視區域底部的元素，請使用 safe-area-inset-bottom 做為 bottom 屬性的值，以免元素位於手勢操作列下方。當下巴移開時，safe-area-inset-bottom 傳回的值會動態更新，讓底部元素能妥善停留在 Android 手勢操作列上方。

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

網站插圖，其中底部元素使用底部安全區域插邊和 bottom 屬性。如果顯示下巴，列會位於 Android 手勢操作列上方。當下巴消失時，元素也會位於其上方。

如插圖所示，結果還不完美：當下巴移開時，剩餘的頁面內容會顯示在手勢操作列區域中。這是因為在這種狀態下，可視區域會延伸到手勢操作列區域。

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

請勿將 padding 設為 safe-area-inset 值。

.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. */
}

重要事項：為避免效能退步，Chrome 偵測到這種模式時，不會在捲動時滑開下巴。

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

建議的做法是結合使用 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));
}

試用即時示範

注意：safe-area-max-inset-bottom 的 36px 備用值是為了不支援 safe-area-max-inset-bottom 的瀏覽器而選擇。選擇這個值的原因是，在 iOS 上使用 Safari 的單一分頁模式時，直向模式的最大底部偏移量為 36px。

重要事項：Chrome 偵測到 calc(env(safe-area-inset-bottom, …) +/- …); 模式時，會進行程式碼最佳化，也就是所謂的快速路徑。這條快速路徑可讓底部錨定內容在下巴移開時，以高效能的方式隨著下巴移動。

視覺效果與 padding-bottom: env(safe-area-inset-bottom, 0px); 方法相同，但效能更佳。由於只有 bottom 的計算值需要隨著下巴移動而變更，因此不會發生版面配置顛簸。

網站插圖，其中包含考量安全區域插邊的底部錨定元素。當下巴可見時 (左)，元素會位於下巴上方。如果沒有顯示下巴，元素就會在視覺上融入 Android 的手勢操作列。

注意：Chrome 135 起提供最大安全區域內嵌 (safe-area-max-inset-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 錯誤，與我們聯絡。感謝您提供意見。