设备姿态 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 |
浏览器兼容性
加载中…