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
- ViewportSegment API