Chrome 正在試用兩個 API:Device Posture API 和 ViewportSegment Enumeration API,這兩個 API 為 Chrome 125 的來源試用。這些單元統稱為折疊式 API,旨在協助開發人員指定折疊式裝置。本文將介紹這些 API,並提供如何開始測試的相關資訊。
主要板型規格主要有兩種:具有單一彈性螢幕的裝置 (無縫接軌),以及具有兩個螢幕的裝置 (具接縫,也稱為雙螢幕裝置)。
這些裝置為開發人員帶來諸多挑戰與機會。這些格式可讓觀眾以其他方式瀏覽內容。例如,使用者可能會拿著像書籍這種不流暢的裝置,後來改成以平板電腦搭配一個平面螢幕使用。有兩個螢幕的裝置會在不同螢幕之間有實體彙整,而可能需要加以考量。
這些新的 API 可讓開發人員為這些裝置提供更優質的使用者體驗。每個 API 都會透過 CSS 和 JavaScript 以兩種方式公開所需的網路平台基本功能。
Device Posture API
折疊式裝置擁有可讓使用者變更其裝置型態或裝置實體狀態的功能。並可變更板型規格,讓內容作者能提供不同的使用者體驗,而這些新的 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 位置,在由硬體功能分隔線段所建立的二維格線中。
下列程式碼片段是簡化的分割使用者體驗建立範例,其中折疊的兩端各有兩個內容區段 (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。此外,您也可以透過指令列執行 Chrome,啟用 --enable-experimental-web-platform-features
。
試聽帶
如需示範,請參閱示範存放區。如果沒有可測試的實體裝置,可以在 Chrome 開發人員工具中選擇 Galaxy Z Fold 5 或 Asus Zenbook Fold 模擬裝置,然後在「Continuous」和「Folded」之間切換。您也可以在適用情況下以視覺化方式呈現轉軸。
相關連結
- Device Posture API
- 可視區域區隔 API