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 平台基础功能。
可折叠设备具备改变其姿态（即设备的物理状态）的能力，从而允许开发者提供不同的用户体验。这些新的API确保网页内容能够灵活响应设备的各种折叠状态。
设备可以呈现以下两种姿态：
Device Posture API 规范引入了一个新的 CSS 媒体特性 device-posture，该特性能够解析出设备的一组固定姿态。这些姿态由预定义的值组成，每个值都代表设备的物理状态。
device-posture 特性支持的值与前面描述的设备姿态相匹配：
注意：如果未来有新的设备上市，可能会添加新的姿态。
示例：
/* 当设备处于“书籍”姿态时 */@media (device-posture: folded) { ... } /* 当设备处于“平板”姿态时，或者像笔记本电脑或台式电脑这样的典型设备 */@media (device-posture: continuous) { ... }为了查询设备的姿态，现在可以使用一个新的 DevicePosture 对象。
const currentPosture = navigator.devicePosture.type; console.log(`当前设备的姿态是：${currentPosture}`);要监听设备姿态的变化，并作出响应，可以注册一个事件监听器:
navigator.devicePosture.addEventListener('change', (event) => { console.log(`设备的姿态已更改为：${event.type}`); // 在这里可以根据新的姿态更新页面的布局或内容 });Viewport Segments 是CSS环境变量，用于定义视口中逻辑上独立区域的位置和尺寸。当视口被硬件特性（如折叠处或独立显示器之间的铰链）分割时，会形成视口段。这些段是开发者可以视为逻辑上不同的视口区域。
CSS
视口被分割成的段数通过两个新的媒体特性来呈现，这些特性在CSS媒体查询第5级规范中定义：vertical-viewport-segments（垂直视口段数）和horizontal-viewport-segments（水平视口段数）。这些特性会解析出视口被分割成的段数。
此外，还新增了环境变量来查询每个逻辑分割的尺寸和位置。这些变量包括：
每个变量中的(x, y)坐标代表了由硬件特性在视口中创建的二维网格中的位置。
在上图中，第一个水平段的坐标是 x 0 和 y 0，第二个水平段的坐标是 x 1 和 y 0。第一个垂直段的坐标是 x 0 和 y 0，第二个垂直段的坐标是 x 0 和 y 1。
以下代码片段是一个简化的例子，展示了如何创建一个在折叠处两侧都有两个内容区域（col1 和 col2）的分割 UX。
<style> /* 当视口水平分割为两段时 */ @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; } } /* 当视口垂直分割为两段时 */ @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>下图展示了物理设备上的体验：
要获取视口段的数量，可以检查 visualViewport 对象中的 segments 属性，它返回一个数组：
const segments = window.visualViewport.segments; console.log('视口具有以下段:', segments);segments 数组中的每一项代表视口的一个逻辑段，这些逻辑段使用 DOMArray 来描述坐标和大小。segments 字段是查询时给定状态的快照，为了接收更新的值，需要监听姿态变化（如屏幕旋转）或调整大小事件，并重新查询 segments 属性。
简单来说，这段代码可以查看当前视口被逻辑分割成的段的信息。如果想要追踪这些段如何随着窗口大小变化或设备姿态变化而变化，需要设置事件监听器来捕获这些变化并重新获取 segments 属性的值。
可折叠 API 已在 Chrome 125 到 Chrome 128 的版本中进行了原始试验。
为了进行本地测试，可以通过访问 chrome://flags/#enable-experimental-web-platform-features 来启用可折叠 API。另外，还可以通过在命令行中运行 Chrome 并添加 --enable-experimental-web-platform-featues 参数来启用这些功能。
本文链接：http://www.28at.com/showinfo-26-87041-0.html前端开发折叠屏应用新姿势！
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
上一篇： .NET中的多线程超时处理实践
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号