Chrome 正在试用两种 API:Device Posture API 和视口细分 Enumeration API(在 Chrome 中以源试用的形式提供) 125。这些 API 统称为 Foldable API,旨在帮助 开发者以可折叠设备为目标这篇博文介绍了这些 API 介绍了如何开始测试它们。
主要有两种不同的物理外形规格:只有一个单独的设备 柔性屏幕(无缝)和双屏幕设备(带接缝,也称为 和双屏设备一样)。
这些设备给开发者带来了挑战和机遇。它们提供 观看内容的其他方式。例如,某用户可能会持有 像图书一样无缝地使用设备,然后改为像平板电脑一样使用, 平板电视。具有两个屏幕的设备在屏幕之间具有物理连接 可能需要考虑的因素。
这些新的 API 为开发者提供了提供更好的用户体验的方法 。每个 API 都以两种形式公开所需的网络平台原语 支持 CSS 和 JavaScript。
设备安全状况 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 位置。 分别位于由硬件特征创建的二维网格中, 用于分隔细分受众群
<ph type="x-smartling-placeholder">![显示水平和垂直细分的示意图。第一个水平线段为 x 0 和 y 0,第二个 x 1 和 y 0。第一个垂直线段是 x 0 和 y 0,第二个 x 0 和 y 1。](https://developer.chrome.google.cn/static/blog/foldable-apis-ot/origintrialfor--eaocssmg9t.png?authuser=0000&hl=sv)
以下代码段是创建拆分用户体验的简化示例,其中 折叠边的每一侧都有两个内容部分(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
要获取视口片段的数量,请查看 segments
条目中的
visualViewport
。
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。请参阅 开始源试用 了解有关源试用的背景信息。
对于本地测试,可通过实验性 Web 应用
在
chrome://flags/#enable-experimental-web-platform-features
。它还可以是
方法是从命令行运行 Chrome 浏览器
--enable-experimental-web-platform-features
。
演示
如需查看演示,请参阅演示 代码库。如果您没有 您可以选择 Galaxy Z Fold 5 或 华硕 Zenbook Fold 在 Chrome 开发者工具中模拟设备,并在两个设备之间 连续纸和折叠。您还可以在设计时 。
相关链接
- Device Posture API <ph type="x-smartling-placeholder">
- 视口细分 API <ph type="x-smartling-placeholder">