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

Алексис Менар
Alexis Menard

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

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

Browser Support

  • Хром: 138.
  • Край: 138.
  • Firefox: не поддерживается.
  • Safari: не поддерживается.

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

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

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

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

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

Складное устройство, на котором веб-страница делится на два логических сегмента вдоль шарнира.