Chrome 正在試用兩種 API:Device Posture API 及可視區域區隔 Chrome 來源試用的 Enumeration API 125.統稱為「折疊式 API」 開發人員指定摺疊式裝置。本文章會介紹這些 API 會提供有關如何開始測試的資訊。
實體板型規格主要有兩種:一種 彈性螢幕 (無縫接軌),以及有兩台螢幕 (附接縫,又稱為 例如雙螢幕裝置)。
而開發人員正面臨這些挑戰及機會。提供的 觀眾可透過其他方式觀看內容舉例來說,使用者可能擁有 順暢操作裝置 (例如書籍) 然後像平板電腦一樣使用 平面。設有兩個螢幕的裝置在兩個螢幕之間實際彙整 這可能要納入考量
這些新的 API 可讓開發人員提供更優異的使用者體驗 。每個 API 都會在兩個位置中公開所需的網路平台基本功能 透過 CSS 和 JavaScript 存取
Device Posture 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 位置 在硬體功能所建立的二維格線中 以便區分區隔
以下程式碼片段是建立分割 UX 的簡易範例,其中 摺疊的每一側有兩個內容部分 (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
如要取得可視區域區隔的數量,請檢查 segments
項目中的
visualViewport
。
const segments = window.visualViewport.segments;
console.log('The viewport has the following segments:', segments);
segments
陣列中的每個項目都代表
其中含有描述座標和大小的 DOMArray
。segments
欄位是查詢時指定狀態的快照,以便接收更新後的
您所需的值,以便監聽型態變更或調整事件大小,並重新查詢
segments
屬性。
試用摺疊式 API
折疊式 API 位於 來源試用 Chrome 125 版至 Chrome 128。詳情請見 開始使用來源試用 查看來源試用的背景資訊。
如要本機測試,可以透過實驗性網頁啟用摺疊式 API
平台功能旗標
chrome://flags/#enable-experimental-web-platform-features
。您也可以
方法是透過指令列執行 Chrome
--enable-experimental-web-platform-features
。
示範
如需示範,請參閱示範 存放區如果您沒有 實體裝置測試時,可以選擇 Galaxy Z Fold 5 或 Asus Zenbook Fold 透過 Chrome 開發人員工具模擬裝置,並切換 Continuous 和 Folded。你也可以在需要時
相關連結
- Device Posture API
- ViewportSegment API