AI 摘要：本文介绍了 Viewport Segments API 的功能与应用，该 API 从 Chrome 138 版本开始可用，支持开发者为可折叠设备优化界面。通过 JavaScript 或 CSS 访问视口逻辑分区的尺寸和位置，开发者可以为可折叠设备创建双窗格体验或避免内容跨折叠区域布局。文章还提及 API 的更新细节及演示案例，展示了如何利用该 API 提升用户体验。

1. API 简介与背景
• 介绍了 Viewport Segments API 的基本概念，解释了视口分区如何由硬件特性（如折叠或铰链）划分而成。
• 强调 API 的目标：帮助开发者将视口的不同区域视为逻辑上独立的区域，从而优化可折叠设备的用户界面。
2. 功能与应用场景
• 详细说明 API 的功能，支持通过 JavaScript 和 CSS 获取视口分区的尺寸和位置。
• 应用场景包括创建双窗格用户体验，以及避免内容布局跨折叠区域，提升用户体验。
3. API 更新与改进
• 提到自去年 Origin Trial 以来的两项主要变更：
a. JavaScript 属性 segments 现位于 window.viewport 对象中，而非之前的 window.visualViewport。
b. 当设备未折叠或不可折叠时，segments 属性行为与 CSS 行为对齐，返回包含单个分区（代表整个视口）的数组。
4. 演示与实践
• 提供了可折叠设备上 API 的演示案例，展示网页如何沿铰链分割成两个逻辑分区。
• 鼓励开发者通过演示了解 API 的实际效果。
5. 发布时间与版本支持
• API 从 Chrome 138 版本开始正式可用，发布时间为 2025 年 6 月 9 日。

Chrome for Developers

Support foldable devices with the Viewport Segments API  |  Blog  |  Chrome for Developers

The Viewport Segments API has shipped with minor changes to the origin trial covered in this blog post.