Chrome 正在试用两个 API:Device Posture API 和 Viewportsegment Enumeration API,从 Chrome 125 开始以源试用形式提供。这些 API 统称为可折叠设备 API,旨在帮助开发者针对可折叠设备开发应用。本博文介绍了这些 API,并提供了有关如何开始测试它们的信息。
主要分为两种不同的物理外形规格:具有单个柔性屏幕(无缝)的设备和具有两个屏幕(有接缝,也称为双屏幕设备)的设备。
这些设备给开发者带来了挑战和机遇。它们提供了更多的内容观看方式。例如,用户可能持有一本书这样的无缝设备,然后改为像使用平板屏幕的平板电脑一样使用。具有两个屏幕的设备会在各屏幕之间建立物理联接,这可能需要考虑。
这些新的 API 为开发者提供了为这些设备提供更好的用户体验的方法。每个 API 都通过 CSS 和 JavaScript 以两种方式公开所需的网络平台基元。
Device Posture API
可折叠设备具有使它们能够更改其折叠状态或设备的物理状态的功能。他们可以更改外形规格,以允许内容作者提供不同的用户体验,而这些新的 API 可确保 Web 内容能够对各种折叠状态做出响应。
设备可能处于两种折叠状态:
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 位置。
以下代码段是创建拆分式用户体验的简化示例,其中,折叠边两侧分别有两个内容部分(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
如需获取视口细分的数量,请查看 visualViewport
中的 segments
条目。
const segments = window.visualViewport.segments;
console.log('The viewport has the following segments:', segments);
segments
数组中的每个条目表示视口的每个逻辑段,并且通过一个 DOMArray
来描述坐标和大小。segments
字段是查询时给定状态的快照,为了接收更新的值,您需要监听折叠状态变化、调整大小事件并重新查询 segments
属性。
试用 Foldable API
Foldable API 目前处于源试用阶段,从 Chrome 125 一直到 Chrome 128。如需了解源试用的背景信息,请参阅源试用入门。
对于本地测试,可以通过位于 chrome://flags/#enable-experimental-web-platform-features
的实验性 Web 平台功能标志启用可折叠 API。您也可以通过在命令行中使用 --enable-experimental-web-platform-features
运行 Chrome 来启用此功能。
样本歌曲
如需查看演示,请参阅演示代码库。如果您没有可用于测试的实体设备,可以在 Chrome 开发者工具中选择 Galaxy Z Fold 5 或 Asus Zenbook Fold 模拟设备,然后在连续模式和折叠式之间切换。如果适用,您还可以直观呈现合页。
相关链接
- Device Posture API
- Viewportsegments API