本頁面由 Cloud Translation API 翻譯而成。

折疊式 API 的來源試用

Alexis Menard

Thomas Steiner

Chrome 正在試用兩個 API：Device Posture API 和 ViewportSegment Enumeration API，這兩個 API 為 Chrome 125 的來源試用。這些單元統稱為折疊式 API，旨在協助開發人員指定折疊式裝置。本文將介紹這些 API，並提供如何開始測試的相關資訊。

主要板型規格主要有兩種：具有單一彈性螢幕的裝置 (無縫接軌)，以及具有兩個螢幕的裝置 (具接縫，也稱為雙螢幕裝置)。

裝置上左側有一個彈性螢幕 (流暢) 的示意圖，右側有一部裝置 (有接縫，也稱為雙螢幕) 繪圖。

這些裝置為開發人員帶來諸多挑戰與機會。這些格式可讓觀眾以其他方式瀏覽內容。例如，使用者可能會拿著像書籍這種不流暢的裝置，後來改成以平板電腦搭配一個平面螢幕使用。有兩個螢幕的裝置會在不同螢幕之間有實體彙整，而可能需要加以考量。

這些新的 API 可讓開發人員為這些裝置提供更優質的使用者體驗。每個 API 都會透過 CSS 和 JavaScript 以兩種方式公開所需的網路平台基本功能。

Device Posture API

折疊式裝置擁有可讓使用者變更其裝置型態或裝置實體狀態的功能。並可變更板型規格，讓內容作者能提供不同的使用者體驗，而這些新的 API 可確保網頁內容能根據各種折疊狀態做出回應。

裝置可能有兩種型態：

folded：筆電型態或書本型態。

採用平面或平板電腦型態的裝置繪製示意圖，並呈現順暢的曲線。

continuous：平面、平板電腦，甚至是流暢的曲線顯示。

筆記型電腦或書本型態的示意圖。

CSS

Device Posture API 規格定義了新的 CSS media-feature device-posture。這項媒體功能會解析為一組固定的型態。這些型態由多個預先定義值組成，每個值都涵蓋裝置的實體狀態。

device-posture 地圖項目的值與之前的可能型態說明相符：

folded
continuous

日後如果市面上推出新裝置，可能還會添加新的型態。

例：

/* Using the device in a 'book' posture. */
@media (device-posture: folded) { ... }

/* Using the device in a 'flat' posture, or any typical device like a laptop or
desktop device. */
@media (device-posture: continuous) { ... }

JavaScript

如要查詢裝置型態，系統會提供新的 DevicePosture 物件。

const { type } = navigator.devicePosture;
console.log(`The current device is of type ${type}.`);

如要回應裝置型態變更 (例如使用者完全開啟裝置，進而從 folded 移至 continuous)，請訂閱 change 事件。

navigator.devicePosture.addEventListener('change', (e) => {
  console.log(`The device posture changed to type ${e.type}`);
});

可視區域區隔 API

可視區域區隔是 CSS 環境變數，用於定義可視區域在邏輯上獨立區域的位置和維度。當可視區域分割為一或多個做為分隔線的硬體功能 (例如不同螢幕的折疊或轉軸) 時，就會建立可視區域區隔。區隔是指可視區域在邏輯上區分的區域。

CSS

邏輯除數是透過兩項新的媒體功能 (如 CSS 媒體查詢級別 5 規格定義) 中公開：vertical-viewport-segments 和 horizontal-viewport-segments。並解析為可視區域劃分的區隔數量。

此外，我們也加入了新的環境變數，以查詢每個邏輯除的維度。這些變數包括：

env(viewport-segment-width x y)
env(viewport-segment-height x y)
env(viewport-segment-top x y)
env(viewport-segment-left x y)
env(viewport-segment-bottom x y)
env(viewport-segment-right x y)

每個變數都有兩個維度，分別代表 X 和 y 位置，在由硬體功能分隔線段所建立的二維格線中。

顯示水平和垂直區隔的圖表。第一個水平線段是 x 0 和 y 0，第二個 x 1 和 y 0。第一個垂直區隔是 x 0 和 y 0，第二個 x 0 和 y 1。 — 第一個水平線段是 x 0 和 y 0，第二個 x 1 和 y 0。第一個垂直區隔是 x 0 和 y 0，第二個 x 0 和 y 1。

下列程式碼片段是簡化的分割使用者體驗建立範例，其中折疊的兩端各有兩個內容區段 (col1 和 col2)。

<style>
  /* Segments are laid out horizontally. */
  @media (horizontal-viewport-segments: 2) {
    #segment-css-container {
      flex-direction: row;
    }

    #col1 {
      display: flex;
      flex: 0 0 env(viewport-segment-right 0 0);
      background-color: steelblue;
    }

    #fold {
      width: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));
      background-color: black;
      height: 100%;
    }

    #col2 {
      display: flex;
      background-color: green;
    }
  }

  /* Segments are laid out vertically. */
  @media (vertical-viewport-segments: 2) {
    #segment-css-container {
      flex-direction: column;
    }

    #col1 {
      display: flex;
      flex: 0 0 env(viewport-segment-bottom 0 0);
      background-color: pink;
    }

    #fold {
      width: 100%;
      height: calc(env(viewport-segment-top 0 1) - env(viewport-segment-bottom 0 0));
      background-color: black;
    }

    #col2 {
      display: flex;
     background-color: seagreen;
    }
  }
</style>

<div id="segment-css-container">
   <div id="col1"></div>
   <div id="fold"></div>
   <div id="col2"></div>
 </div>

以下相片呈現了實體裝置上的體驗。

垂直書本型態的折疊式手機。

摺疊式手機搭配橫向書本型態。

折疊式平板電腦放在橫向書本型態上。

JavaScript

如要取得可視區域區隔數量，請查看 visualViewport 中的 segments 項目。

const segments = window.visualViewport.segments;
console.log('The viewport has the following segments:', segments);

segments 陣列中的每個項目都代表可視區域的每個邏輯片段，並以描述座標和大小的 DOMArray 表示。segments 欄位是查詢時指定狀態的快照，如要接收更新的值，您必須監聽狀態變更或調整事件大小，並重新查詢 segments 屬性。

試用折疊式 API

從 Chrome 125 版到 Chrome 128 版，您可以在來源試用中取得折疊式 API。請參閱「開始使用來源試用」，瞭解來源試用的背景資訊。

如要進行本機測試，您可以透過 chrome://flags/#enable-experimental-web-platform-features 的實驗性 Web Platform 功能旗標啟用折疊式 API。此外，您也可以透過指令列執行 Chrome，啟用 --enable-experimental-web-platform-features。

試聽帶

如需示範，請參閱示範存放區。如果沒有可測試的實體裝置，可以在 Chrome 開發人員工具中選擇 Galaxy Z Fold 5 或 Asus Zenbook Fold 模擬裝置，然後在「Continuous」和「Folded」之間切換。您也可以在適用情況下以視覺化方式呈現轉軸。

Chrome 開發人員工具模擬折疊式裝置。

折疊式 API 的來源試用

Device Posture API

CSS

JavaScript

可視區域區隔 API

CSS

JavaScript

試用折疊式 API

試聽帶

相關連結