API для работы со складываемыми экранами
Мало нам было устройств всех размеров. Мало нам было бровок и плавающих островков на мобильных для вёрстки. Теперь будем верстать ещё и под складываемые устройства. Точнее, верстать могли уже давно, а вот делать это контролируемо сможем только через какое-то время.
Начиная с Chrome 125 за Origin Trial появится доступ к Device Posture API и Viewport Segments API.
Device Posture API позволит через CSS и JavaScript понимать, в каком состоянии сейчас складываемое устройство.
-
-
В JavaScript появится
Viewport Segments API посложнее, тут рекомендую вчитываться в примеры в статье. Но если коротко, в функции
В JavaScript появится
Интересно это всё попробовать на реальных устройствах, конечно, потому что сложно верстать наощупь. Но учитывая, что такие экраны уже не игрушка, а вполне себе коммерческая линейка смартфонов и планшетов, верстать под это придётся.
https://developer.chrome.com/blog/foldable-apis-ot
Мало нам было устройств всех размеров. Мало нам было бровок и плавающих островков на мобильных для вёрстки. Теперь будем верстать ещё и под складываемые устройства. Точнее, верстать могли уже давно, а вот делать это контролируемо сможем только через какое-то время.
Начиная с Chrome 125 за Origin Trial появится доступ к Device Posture API и Viewport Segments API.
Device Posture API позволит через CSS и JavaScript понимать, в каком состоянии сейчас складываемое устройство.
-
@media (device-posture: folded) — устройство согнуто, экран разделён на две части.-
@media (device-posture: continuous) — экран сплошной (подходит в том числе для обычных экранов).В JavaScript появится
navigator.devicePosture, из которого можно получить то же самое. А ещё на него можно навесить addEventListener('change', ...), чтобы реагировать на изменения.Viewport Segments API посложнее, тут рекомендую вчитываться в примеры в статье. Но если коротко, в функции
env() появится ещё несколько ключевых слов, которые помогут работать с размерами сегментов складываемого экрана. Честно говоря, синтаксис не самый запоминающийся, у разных положений разные кодовые числа. Но по сути это единственный гибкий способ узнать нужные значения для вычислений в CSS.В JavaScript появится
window.visualViewport.segments, в котором будет лежать массив сегментов с их размерами.Интересно это всё попробовать на реальных устройствах, конечно, потому что сложно верстать наощупь. Но учитывая, что такие экраны уже не игрушка, а вполне себе коммерческая линейка смартфонов и планшетов, верстать под это придётся.
https://developer.chrome.com/blog/foldable-apis-ot