前端开发折叠屏应用新姿势！

未经授权，禁止转载，转载请注明出处！

Chrome 浏览器正在试验两个全新的 API： Device Posture API （设备姿态API）和 Viewport Segments Enumeration API （视口段枚举API），这两个 API 统称为 Foldable APIs（可折叠API），它们从 Chrome 125 版本开始作为起源试验功能提供。这些 API 旨在帮助开发者 更好地针对可折叠设备进行开发和优化 ，本文就来看看这些 API 如何解锁折叠屏应用开发新姿势。

这些 API 是在过去几年中，微软、英特尔、三星和谷歌合作开发的。

可折叠设备

可折叠设备主要分为两种物理形态：一种是只有单个柔性屏幕（无缝）的设备，另一种是拥有两个屏幕（有缝，也称为双屏设备）的设备。

这些新的 API 为开发者提供了改善这类设备用户体验的方法。每个 API 都通过CSS和JavaScript两种途径，向开发者开放了所需的 Web 平台基础功能。

Device Posture API

可折叠设备具备改变其 姿态 （即设备的物理状态）的能力，从而允许开发者提供不同的用户体验。这些新的API确保网页内容能够灵活响应设备的各种折叠状态。

设备可以呈现以下两种姿态：

CSS

Device Posture API 规范引入了一个新的 CSS 媒体特性 device-posture，该特性能够解析出设备的一组固定姿态。这些姿态由预定义的值组成，每个值都代表设备的物理状态。

device-posture 特性支持的值与前面描述的设备姿态相匹配：

注意：如果未来有新的设备上市，可能会添加新的姿态。

示例：

/* 当设备处于「书籍」姿态时 */
@media (device-posture: folded){ ... }
/* 当设备处于「平板」姿态时，或者像笔记本电脑或台式电脑这样的典型设备 */
@media (device-posture: continuous){ ... }


JavaScript

为了查询设备的姿态，现在可以使用一个新的 DevicePosture 对象。

const currentPosture = navigator.devicePosture.type;
console.log(`当前设备的姿态是：${currentPosture}`);


要监听设备姿态的变化，并作出响应，可以注册一个事件监听器:

navigator.devicePosture.addEventListener('change',(event)=>{
console.log(`设备的姿态已更改为：${event.type}`);
// 在这里可以根据新的姿态更新页面的布局或内容
});


Viewport Segments API

Viewport Segments 是CSS环境变量，用于定义视口中逻辑上独立区域的位置和尺寸。当视口被硬件特性（如折叠处或独立显示器之间的铰链）分割时，会形成视口段。这些段是开发者可以视为逻辑上不同的视口区域。

CSS

视口被分割成的段数通过两个新的媒体特性来呈现，这些特性在CSS媒体查询第5级规范中定义：vertical-viewport-segments（垂直视口段数）和horizontal-viewport-segments（水平视口段数）。这些特性会解析出视口被分割成的段数。

此外，还新增了环境变量来查询每个逻辑分割的尺寸和位置。这些变量包括：

每个变量中的(x, y)坐标代表了由硬件特性在视口中创建的二维网格中的位置。

以下代码片段是一个简化的例子，展示了如何创建一个在折叠处两侧都有两个内容区域（col1 和 col2）的分割 UX。

< style>
/* 当视口水平分割为两段时 */
@media (horizontal-viewport-segments:2){
#segment-css-container{
flex-direction: row;
}
#col1{
display: flex;
flex:00env(viewport-segment-right 00);
background-color:steelblue;
}
#fold{
width:calc(env(viewport-segment-left 10)-env(viewport-segment-right 00));
background-color:black;
height:100%;
}
#col2{
display: flex;
background-color:green;
}
}
/* 当视口垂直分割为两段时 */
@media (vertical-viewport-segments:2){
#segment-css-container{
flex-direction: column;
}
#col1{
display: flex;
flex:00env(viewport-segment-bottom 00);
background-color:pink;
}
#fold{
width:100%;
height:calc(env(viewport-segment-top 01)-env(viewport-segment-bottom 00));
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('视口具有以下段:', segments);


segments 数组中的每一项代表视口的一个逻辑段，这些逻辑段使用 DOMArray 来描述坐标和大小。 segments 字段是查询时给定状态的快照，为了接收更新的值，需要监听姿态变化（如屏幕旋转）或调整大小事件，并重新查询 segments 属性。

简单来说，这段代码可以查看当前视口被逻辑分割成的段的信息。如果想要追踪这些段如何随着窗口大小变化或设备姿态变化而变化，需要设置事件监听器来捕获这些变化并重新获取 segments 属性的值。

尝试 Foldable APIs

可折叠 API 已在 Chrome 125 到 Chrome 128 的版本中进行了原始试验。

为了进行本地测试，可以通过访问 chrome://flags/#enable-experimental-web-platform-features 来启用可折叠 API。另外，还可以通过在命令行中运行 Chrome 并添加 --enable-experimental-web-platform-featues 参数来启用这些功能。

推荐阅读