折疊式 API 的來源試用

Alexis Menard

Thomas Steiner

Chrome 正在試用兩種 API：Device Posture API 及可視區域區隔 Chrome 來源試用的 Enumeration API 125.統稱為「折疊式 API」 開發人員指定摺疊式裝置。本文章會介紹這些 API 會提供有關如何開始測試的資訊。

實體板型規格主要有兩種：一種 彈性螢幕 (無縫接軌)，以及有兩台螢幕 (附接縫，又稱為 例如雙螢幕裝置)。

而開發人員正面臨這些挑戰及機會。提供的 觀眾可透過其他方式觀看內容舉例來說，使用者可能擁有 順暢操作裝置 (例如書籍) 然後像平板電腦一樣使用 平面。設有兩個螢幕的裝置在兩個螢幕之間實際彙整 這可能要納入考量

這些新的 API 可讓開發人員提供更優異的使用者體驗 。每個 API 都會在兩個位置中公開所需的網路平台基本功能 透過 CSS 和 JavaScript 存取

Device Posture 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 位置 在硬體功能所建立的二維格線中 以便區分區隔

以下程式碼片段是建立分割 UX 的簡易範例，其中 摺疊的每一側有兩個內容部分 (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

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

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

segments 陣列中的每個項目都代表 其中含有描述座標和大小的 DOMArray。segments 欄位是查詢時指定狀態的快照，以便接收更新後的 您所需的值，以便監聽型態變更或調整事件大小，並重新查詢 segments 屬性。

試用摺疊式 API

折疊式 API 位於 來源試用 Chrome 125 版至 Chrome 128。詳情請見 開始使用來源試用 查看來源試用的背景資訊。

如要本機測試，可以透過實驗性網頁啟用摺疊式 API 平台功能旗標 chrome://flags/#enable-experimental-web-platform-features。您也可以 方法是透過指令列執行 Chrome --enable-experimental-web-platform-features。

示範

如需示範，請參閱示範 存放區如果您沒有 實體裝置測試時，可以選擇 Galaxy Z Fold 5 或 Asus Zenbook Fold 透過 Chrome 開發人員工具模擬裝置，並切換 Continuous 和 Folded。你也可以在需要時

相關連結

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