使用 Viewport Segments API 支援折疊式裝置

Alexis Menard
Alexis Menard
X GitHub

發布日期：2025 年 6 月 9 日

Viewport Segments API 可透過 JavaScript 或 CSS 存取可視區域中邏輯上獨立區域的位置和尺寸，並從 Chrome 138 版開始提供。

Browser Support

  • Chrome: 138.
  • Edge: 138.
  • Firefox: not supported.
  • Safari: not supported.

如果一或多個硬體功能 (例如獨立螢幕之間的摺疊處或轉軸) 將可視區域分割成多個部分，就會建立可視區域區隔。

區隔是可視埠的區域，您可以在開發網站或應用程式時，將這些區域視為邏輯上不同的部分。這些令人期待的 API 可讓您專為摺疊式裝置建立或最佳化介面。例如建立雙窗格使用者體驗，或只是避免內容跨越摺疊處。

與我們去年執行的原始試用階段相比，有兩項變更：

  • JavaScript 屬性 segments 現在位於新加入的 window.viewport 物件中，而非 window.visualViewport。
  • 裝置未摺疊時的 segments 屬性行為，已與這項功能的 CSS 行為保持一致。如果裝置未摺疊 (或無法摺疊)，segments 屬性會包含單一區隔的陣列，代表整個檢視區塊的大小。

請參閱摺疊式裝置的展示應用程式，瞭解 API 的實際運作方式！

折疊式裝置顯示網頁，網頁沿著轉軸分割為兩個邏輯區隔。