大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！

Chrome 通过 Viewport Segments API 支持可折叠设备

2025 年 6 月 9 日 Google 开发者 Alexis Menard 宣布支持 Viewport Segments API ，其允许使用 JavaScript 或 CSS 访问视口中逻辑上独立区域的位置和尺寸，该 API 从 Chrome 138 开始提供。

当视口被一个或多个硬件功能，例如：折叠或不同显示屏之间的铰链分割时，会创建视口段 (Viewport Segments)，由硬件功能充当分隔线。

段是视口中的区域，在开发网站或应用时，开发者可以将其视为逻辑上独立的区域。该 API 可让开发者专门针对可折叠设备创建或优化界面，例如：打造双窗格用户体验，或避免内容横跨折叠区域。

Viewport Segments API 与去年试用版本相比，有两处核心变化：

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

如何使用 Viewport Segments API

地图内容拆分双 Segments

接下来看几个上述场景的实际示例，以及如何利用 Viewport Segments 来优化用户体验。每种情况都将从一些现有场景入手，并使其更加复杂，以便为应用该方案提供机会。

下面是一个地图应用程序，在一个窗口 Segments 上显示地图，在另一个窗口 Segments 上显示搜索结果：

const segments = window.viewport.segments;
if (segments && segments.length> 1) {
    // 现在可以知道该设备是可折叠的
    // 可以根据需要更新布局中的 CSS 类
	document.body.classList.add('is-foldable');
	document.querySelector('.map').classList.add('flex-one-half');
	document.querySelector('.locations-list').classList.add('flex-one-half');
}

开发者还可以使用 @
horizontal-viewport-segments 和 @
vertical-viewport-segments 媒体查询，根据设备的方向更改网站的布局和样式。此外，还有许多新的环境变量可用于在双屏设备上放置和定位内容。

// 媒体查询
@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) { }
@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) { }

下面是可行的新环境变量：

viewport-segment-width	<length>	2
viewport-segment-height	<length>	2
viewport-segment-top	<length>	2
viewport-segment-left	<length>	2
viewport-segment-bottom	<length>	2
viewport-segment-right	<length>	2

响应地图应用程序调整大小跨越状态变化

此时开发者可以通过监听 onsize 事件来处理：

window.onresize = function() {
    const segments = window.viewport.segments;
    if (segments && segments.length> 1) {
        // 将更改后的内容拆分成两个 Segments
    } else {
        // 将状态重置为单个视口（正常响应布局）
    }
}

更多优秀示例可以参考文末资料，本文不再过多展开。

参考资料

https://github.com/foldable-devices/demos

https://github.com/WICG/visual-viewport/blob/gh-pages/segments-explainer/SEGMENTS-EXPLAINER.md