使用 Viewport Segments API 支持可折叠设备

Alexis Menard

发布时间：2025 年 6 月 9 日

Viewport Segments API 可让您使用 JavaScript 或 CSS 访问视口中逻辑上分隔区域的位置和尺寸，并且从 Chrome 138 开始可用。

当视口被一个或多个硬件功能（例如单独显示屏之间的折缝或合页）分屏时，系统会创建视口片段，这些功能充当分隔符。

细分是视口的区域，您可以在开发网站或应用时将其视为逻辑上不同的区域。借助这些令人兴奋的 API，您可以专门针对可折叠设备创建或优化界面。例如，创建双窗格用户体验，或仅避免内容跨折叠处布局。

与我们去年开展的来源测试相比，我们做出了以下两项更改：

• JavaScript 属性 segments 现在位于新添加的 window.viewport 对象中，而不是 window.visualViewport 中。
• 设备未折叠时的 segments 属性行为已与此功能的 CSS 行为保持一致。当设备处于展开状态（或无法折叠）时，segments 属性将包含一个单个片段的数组，表示整个视口大小。

查看可折叠设备演示，了解该 API 的实际运作方式！