裝置姿態 API

可用性有限

此特性不是基線特性,因為它在一些最廣泛使用的瀏覽器中不起作用。

實驗性: 這是一項實驗性技術
在生產中使用此技術之前,請仔細檢查瀏覽器相容性表格

Device Posture API(裝置姿態 API)允許開發者建立能夠適應摺疊裝置姿態並響應姿態變化的 UI。

概念與用法

摺疊裝置給開發者帶來了獨特的挑戰 — 它們既可以像普通平板螢幕一樣使用,也可以像書本一樣使用。此外,有些裝置採用單一折疊屏,有些則採用帶有鉸鏈連線的雙屏。必須小心處理,確保內容不會被物理縫隙遮擋,或因靠近中心折痕而難以閱讀。

Device Posture API 定義了 postures(姿態),用於指示裝置的當前物理摺疊狀態。目前可用的姿態是:

continuous

表示螢幕處於平坦狀態。摺疊裝置在平坦狀態下是 continuous(連續)的;無論是完全開啟還是完全關閉。非摺疊裝置被視為平坦,因此始終是 continuous(連續)的 — 這包括無縫曲面顯示器以及標準的桌面、筆記本、平板電腦和移動螢幕。 一系列平坦螢幕,包括手機和平板電腦,以及一個無縫曲面顯示器

folded

表示螢幕處於摺疊狀態。摺疊裝置在使用書本或筆記型電腦姿態時是 folded(摺疊)的。 一系列摺疊螢幕,包括處於書本和筆記型電腦姿態的摺疊手機和平板電腦

Device Posture API 包含相關功能,使您能夠執行指令碼並根據當前裝置姿態和姿態變化來調整佈局。

CSS 特性

device-posture @media 特性

檢測裝置的當前姿態。

介面

DevicePosture

表示裝置的姿態,提供對當前姿態 type(型別)的訪問,以及在姿態改變時觸發的 change(改變)事件。

其他介面的擴充套件

Device Posture API 的入口點 — 返回瀏覽器的 DevicePosture 物件。

示例

您可以在 Device Posture API 演示中找到一個展示所有功能的完整示例。

如果可能,您應該在摺疊裝置上檢視此內容。當前的瀏覽器開發者工具能夠模擬摺疊裝置,但無法模擬部分摺疊的裝置 — 只能模擬完全開啟或關閉 — 因此它們將始終返回 continuous(連續)。

規範

規範
裝置姿態 API
# dom-deviceposture

瀏覽器相容性

另見