Android 版 Chrome 邊到邊遷移指南

Bramus

發布日期：2025 年 2 月 28 日

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

在 Chrome 135 之前，Android 版 Chrome 不會從邊到邊繪製。本指南將說明這項異動對網站的影響，以及開發人員如何因應這項異動。

注意： Chrome 135 中的變更適用於小螢幕裝置。目前不支援在大螢幕裝置上執行的 Android 版 Chrome，但我們會在日後的 Chrome 版本中解決這項問題。

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

隨處可見的酒吧

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

狀態列、說明文字列和導覽列統稱為系統列。這些螢幕可顯示電池電量、時間和通知快訊等重要資訊，並可在任何地方直接與裝置互動。

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

Android 狀態列醒目顯示 (source)。

畫面底部有導覽列，可讓您使用返回、主畫面和總覽控制項控制導覽功能。這可以是傳統的三按鈕導覽，或是現代的手勢操作列。

手勢導覽列 (來源source)。

除了 Android 系統列外，Chrome 本身也提供網址列，可在您捲動時動態展開及收合。

Chrome 採用邊到邊設計

您造訪的網站會以矩形形式呈現，稱為「(版面配置) 檢視區」。

在 Android 版 Chrome 135 之前，該版面配置檢視區會在頂端狀態列和底部手勢導覽列之間繪製。Chrome 的網址列 (或缺少網址列) 可能會影響可視區域的大小，但可視區域絕不會擴展至頂端系統列或底部手勢導覽列。

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

自 Chrome 135 起，檢視區可延伸至 Android 的手勢導覽列。這就是所謂的「無邊框顯示」行為。

在 Android 裝置上的 Chrome 中顯示的大型檢視區域並非從邊到邊 (左圖)，但在 Chrome 中則是從邊到邊 (右圖)。在支援邊到邊功能的 Chrome 中，當 Chrome 的動態工具列收回時，視區會延伸至手勢導覽列區域。

注意： iOS 11.3 發布後，iOS 版 Chrome 新增了邊到邊支援功能。本指南中的建議也適用於在 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 原生底部手勢導覽列上方，或是讓背景延伸至該區域。

安全區域內嵌

Browser Support

• 69
• 79
• 65
• 11

Source

安全區域內嵌是四個環境變數，可透過頂端、右側、底部和左側內嵌，定義從可視區域邊緣開始的矩形。

這四個值組合起來就是安全區域矩形，您可以在這個區域內放置內容，確保內容不會遭到 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 設為安全區域內嵌值。

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

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

使用安全區域底部內嵌和安全區域底部最大內嵌

建議您改用 safe-area-inset-bottom 和 safe-area-max-inset-bottom 的組合。safe-area-max-inset-bottom 代表 safe-area-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 錯誤。感謝您提供意見。