裝置姿態 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 |
瀏覽器相容性
載入中…