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 特徵的值與上述可能型態的說明相符：
foldedcontinuous
如果市面上有新裝置推出，我們日後可能會新增姿勢。
範例：
/* 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 媒體查詢等級 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
折疊式 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
- Viewport Segments API