Viewport Segments API

可用性有限

此特性不是基线特性，因为它在一些最广泛使用的浏览器中不起作用。

实验性： 这是一项实验性技术
在生产中使用此技术之前，请仔细检查浏览器兼容性表格。

Viewport Segments API 允许开发者使用 CSS 和 JavaScript 访问逻辑上分离的视口片段的位置和尺寸。视口片段 是在视口被一个或多个硬件功能（如折叠屏或多个显示器之间的铰链）分割时创建的。借助 Viewport Segments API，开发者可以创建针对不同视口片段尺寸和布局进行优化的响应式设计。

概念与用法

当设备拥有多个显示屏，并且这些显示屏被设计成作为同一显示表面的不同片段时（例如折叠屏或带铰链屏幕的智能手机），会给开发者带来一些独特的设计挑战。你可以将布局针对单个显示屏进行优化，但如何确保设计元素能够舒适地适应不同的片段，而不是被一分为二？又该如何防止内容被物理折叠/连接处遮挡？

了解用户设备屏幕是否具有折叠或连接处、不同片段的大小、它们是否尺寸相同以及片段的朝向（是并排还是上下排列）可能很重要。Viewport Segments API 能够通过 CSS 和 JavaScript 功能访问用户的设备分段信息，提供对显示屏内每个视口片段的位置和尺寸的访问，包括用于检测不同水平和垂直区域布局的 @media 功能。

有关 API 工作原理的说明，请参阅使用 Viewport Segments API。