折疊式 API 的來源試用

Alexis Menard

Thomas Steiner

Chrome 正在測試兩個 API，分別是 Device Posture API 和 Viewport Segments Enumeration API，這兩個 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}`);
});

Viewport Segments API

檢視區段是 CSS 環境變數，可定義檢視區中邏輯上獨立區域的位置和大小。當檢視區由一或多個硬體功能 (例如折疊或分隔兩個螢幕的轉軸) 劃分時，系統就會建立檢視區區段。區段是指可由作者視為邏輯上不同的可視區域。

CSS

邏輯區隔數量會透過兩項新媒體功能公開，這兩項功能在 CSS Media Queries Level 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 位置。

以下程式碼片段是建立分割式使用者體驗的簡化範例，其中折疊兩側各有兩個內容區段 (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

折疊式 API 可在 Chrome 125 到 Chrome 128 的來源試用中使用。如要進一步瞭解原點測試，請參閱「開始使用原點測試」。

如要進行本機測試，您可以使用 chrome://flags/#enable-experimental-web-platform-features 中的「Experimental Web Platform」功能標記啟用折疊式 API。您也可以透過指令列搭配 --enable-experimental-web-platform-features 執行 Chrome，啟用這個功能。

示範

如需試用版，請參閱試用版存放區。如果您沒有可用於測試的實體裝置，可以在 Chrome 開發人員工具中選擇 Galaxy Z Fold 5 或 Asus Zenbook Fold 模擬裝置，並在「Continuous」和「Folded」之間切換。您也可以視需要將鉸鏈視覺化。

相關連結

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