设备姿态 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

浏览器兼容性

另见