折疊式 API 的來源試用

Alexis Menard

Thomas Steiner

Chrome 目前正在試用兩個 API：Device Posture API 和 ViewportSegment Enumeration API，都提供 Chrome 125 的來源試用。上述 API 統稱為「折疊式 API」，旨在協助開發人員指定摺疊式裝置。本文章會介紹這些 API，並說明如何開始測試。

主要有兩種不同的實體板型規格：一個是單一彈性螢幕 (無縫線) 的裝置，以及具有兩個螢幕的裝置 (又稱為雙螢幕裝置)。

而開發人員正面��這些挑戰及機會。提供觀看內容的其他方式。舉例來說，使用者可能拿著一本保持流暢的裝置，然後變成使用平板平板電腦的平板電腦。因此，設有兩個螢幕的裝置會在不同螢幕之間有實體彙整，因此可能需要納入考量。

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

Device Posture API

摺疊式裝置具備各項功能，可變更裝置的「型態」_或裝置實體狀態。他們可以變更板型規格，讓內容作者提供不同的使用者體驗，而這些新的 API 可確保網路內容能回應各種折疊狀態。

裝置可能處於以下兩種裝置型態：

• folded：筆電或書本型態。

• continuous：平面、平板電腦，甚至是流暢的弧形螢幕。

CSS

Device Posture API 規格定義了新的 CSS 媒體功能 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 和 y 位置。

以下程式碼片段是建立分割使用者體驗的簡化範例，而折疊的每一端都有兩個內容區段 (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。您也可以使用 --enable-experimental-web-platform-features 在指令列執行 Chrome，藉此啟用這個 API。

試聽帶

如需示範，請參閱示範存放區。如果您沒有實體裝置可以進行測試，您可以在 Chrome 開發人員工具中選擇 Galaxy Z Fold 5 或 Asus Zenbook Fold 模擬裝置，並在「Continuous」(持續) 和「Folded」(摺疊) 間切換。您也可以在適用情況下，將轉軸視覺化。

相關連結

• Device Posture API
  • Mozilla 位置
  • WebKit 位置
  • Chrome 狀態項目
  • W3C 規格
• ViewportSegment API
  • Mozilla 位置
  • WebKit 位置
  • Chrome 狀態項目
  • W3C CSS 媒體查詢規格和 W3C CSS 環境變數規格