Поддержка складных устройств с помощью API Viewport Segments

Alexis Menard

Опубликовано: 9 июня 2025 г.

API Viewport Segments предоставляет доступ к положению и размерам логически отдельной области области просмотра либо с помощью JavaScript, либо с помощью CSS и доступен начиная с Chrome версии 138.

Сегменты области просмотра создаются, когда область просмотра разделена одним или несколькими аппаратными элементами — такими как сгиб или шарнир между отдельными дисплеями — которые действуют как разделитель.

Сегменты — это области видимости, которые можно рассматривать как логически обособленные при разработке сайта или приложения. Эти замечательные API позволяют создавать или оптимизировать интерфейс специально для складных устройств. Например, создавать двухпанельный пользовательский интерфейс или просто избегать размещения контента по всей ширине экрана.

По сравнению с первоначальным испытанием, которое мы проводили в прошлом году , произошли два изменения:

• Атрибут JavaScript segments теперь находится в недавно добавленном объекте window.viewport , а не в window.visualViewport .
• Поведение свойства segments , когда устройство не свернуто, приведено в соответствие с поведением CSS этой функции. Когда устройство не свернуто (или не может быть свернуто), свойство segments будет содержать массив из одного сегмента, представляющего весь размер области просмотра.

Посмотрите демонстрации складных устройств , чтобы увидеть API в действии!