Chrome 瀏覽器正在試驗(yàn)兩個(gè)全新的 API：Device Posture API（設(shè)備姿態(tài)API）和 Viewport Segments Enumeration API（視口段枚舉API），這兩個(gè) API 統(tǒng)稱為 Foldable APIs（可折疊API），它們從 Chrome 125 版本開始作為起源試驗(yàn)功能提供。這些 API 旨在幫助開發(fā)者更好地針對(duì)可折疊設(shè)備進(jìn)行開發(fā)和優(yōu)化，本文就來看看這些 API 如何解鎖折疊屏應(yīng)用開發(fā)新姿勢(shì)。

這些 API 是在過去幾年中，微軟、英特爾、三星和谷歌合作開發(fā)的。

可折疊設(shè)備

可折疊設(shè)備主要分為兩種物理形態(tài)：一種是只有單個(gè)柔性屏幕（無縫）的設(shè)備，另一種是擁有兩個(gè)屏幕（有縫，也稱為雙屏設(shè)備）的設(shè)備。

這些設(shè)備為內(nèi)容的展示提供了多樣化的方式。例如，用戶可以像翻閱書籍一樣使用無縫設(shè)備，也可以像使用平板電腦一樣將其展開為平面屏幕。而雙屏設(shè)備因其兩塊屏幕之間存在物理接縫，需要開發(fā)者特別關(guān)注這一點(diǎn)。

這些新的 API 為開發(fā)者提供了改善這類設(shè)備用戶體驗(yàn)的方法。每個(gè) API 都通過CSS和JavaScript兩種途徑，向開發(fā)者開放了所需的 Web 平臺(tái)基礎(chǔ)功能。

Device Posture API

可折疊設(shè)備具備改變其姿態(tài)（即設(shè)備的物理狀態(tài)）的能力，從而允許開發(fā)者提供不同的用戶體驗(yàn)。這些新的API確保網(wǎng)頁內(nèi)容能夠靈活響應(yīng)設(shè)備的各種折疊狀態(tài)。

設(shè)備可以呈現(xiàn)以下兩種姿態(tài)：

• 折疊態(tài)：類似于筆記本電腦或書籍的姿態(tài)。

• 連續(xù)態(tài)：平板模式，類似于無縫的平板及曲面顯示屏。

CSS

Device Posture API 規(guī)范引入了一個(gè)新的 CSS 媒體特性 device-posture，該特性能夠解析出設(shè)備的一組固定姿態(tài)。這些姿態(tài)由預(yù)定義的值組成，每個(gè)值都代表設(shè)備的物理狀態(tài)。

device-posture 特性支持的值與前面描述的設(shè)備姿態(tài)相匹配：

• folded（折疊態(tài)）
• continuous（連續(xù)態(tài)）

注意：如果未來有新的設(shè)備上市，可能會(huì)添加新的姿態(tài)。

示例：

/* 當(dāng)設(shè)備處于“書籍”姿態(tài)時(shí) */

@media (device-posture: folded) { ... } 

/* 當(dāng)設(shè)備處于“平板”姿態(tài)時(shí)，或者像筆記本電腦或臺(tái)式電腦這樣的典型設(shè)備 */

@media (device-posture: continuous) { ... }

JavaScript

為了查詢?cè)O(shè)備的姿態(tài)，現(xiàn)在可以使用一個(gè)新的 DevicePosture 對(duì)象。

const currentPosture = navigator.devicePosture.type;  
console.log(`當(dāng)前設(shè)備的姿態(tài)是：${currentPosture}`);

要監(jiān)聽設(shè)備姿態(tài)的變化，并作出響應(yīng)，可以注冊(cè)一個(gè)事件監(jiān)聽器:

navigator.devicePosture.addEventListener('change', (event) => {  
  console.log(`設(shè)備的姿態(tài)已更改為：${event.type}`);  
  // 在這里可以根據(jù)新的姿態(tài)更新頁面的布局或內(nèi)容  
});

Viewport Segments API

Viewport Segments 是CSS環(huán)境變量，用于定義視口中邏輯上獨(dú)立區(qū)域的位置和尺寸。當(dāng)視口被硬件特性（如折疊處或獨(dú)立顯示器之間的鉸鏈）分割時(shí)，會(huì)形成視口段。這些段是開發(fā)者可以視為邏輯上不同的視口區(qū)域。

CSS

視口被分割成的段數(shù)通過兩個(gè)新的媒體特性來呈現(xiàn)，這些特性在CSS媒體查詢第5級(jí)規(guī)范中定義：vertical-viewport-segments（垂直視口段數(shù)）和horizontal-viewport-segments（水平視口段數(shù)）。這些特性會(huì)解析出視口被分割成的段數(shù)。

此外，還新增了環(huán)境變量來查詢每個(gè)邏輯分割的尺寸和位置。這些變量包括：

• env(viewport-segment-width: x y)：查詢指定(x, y)位置視口段的寬度。
• env(viewport-segment-height: x y)：查詢指定(x, y)位置視口段的高度。
• env(viewport-segment-top: x y)：查詢指定(x, y)位置視口段的上邊界位置。
• env(viewport-segment-left: x y)：查詢指定(x, y)位置視口段的左邊界位置。
• env(viewport-segment-bottom: x y)：查詢指定(x, y)位置視口段的下邊界位置。
• env(viewport-segment-right: x y)：查詢指定(x, y)位置視口段的右邊界位置。

每個(gè)變量中的(x, y)坐標(biāo)代表了由硬件特性在視口中創(chuàng)建的二維網(wǎng)格中的位置。

在上圖中，第一個(gè)水平段的坐標(biāo)是 x 0 和 y 0，第二個(gè)水平段的坐標(biāo)是 x 1 和 y 0。第一個(gè)垂直段的坐標(biāo)是 x 0 和 y 0，第二個(gè)垂直段的坐標(biāo)是 x 0 和 y 1。

以下代碼片段是一個(gè)簡(jiǎn)化的例子，展示了如何創(chuàng)建一個(gè)在折疊處兩側(cè)都有兩個(gè)內(nèi)容區(qū)域（col1 和 col2）的分割 UX。

<style>
  /* 當(dāng)視口水平分割為兩段時(shí) */
  @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;
    }
  }

  /* 當(dāng)視口垂直分割為兩段時(shí) */
  @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>

下圖展示了物理設(shè)備上的體驗(yàn)：

JavaScript

要獲取視口段的數(shù)量，可以檢查 visualViewport 對(duì)象中的 segments 屬性，它返回一個(gè)數(shù)組：

const segments = window.visualViewport.segments;  

console.log('視口具有以下段:', segments);

segments 數(shù)組中的每一項(xiàng)代表視口的一個(gè)邏輯段，這些邏輯段使用 DOMArray 來描述坐標(biāo)和大小。segments 字段是查詢時(shí)給定狀態(tài)的快照，為了接收更新的值，需要監(jiān)聽姿態(tài)變化（如屏幕旋轉(zhuǎn)）或調(diào)整大小事件，并重新查詢 segments 屬性。

簡(jiǎn)單來說，這段代碼可以查看當(dāng)前視口被邏輯分割成的段的信息。如果想要追蹤這些段如何隨著窗口大小變化或設(shè)備姿態(tài)變化而變化，需要設(shè)置事件監(jiān)聽器來捕獲這些變化并重新獲取 segments 屬性的值。

嘗試 Foldable APIs

可折疊 API 已在 Chrome 125 到 Chrome 128 的版本中進(jìn)行了原始試驗(yàn)。

為了進(jìn)行本地測(cè)試，可以通過訪問 chrome://flags/#enable-experimental-web-platform-features 來啟用可折疊 API。另外，還可以通過在命令行中運(yùn)行 Chrome 并添加 --enable-experimental-web-platform-featues 參數(shù)來啟用這些功能。