Складные телефоны и веб: пора подготовить свои сайты

Давай начистоту — складные телефоны крутились где-то на обочине технологий последние несколько лет. Android-пользователи уже вовсю пользовались foldable-устройствами, пока остальные наблюдали со стороны и тихо завидовали. Но Apple наконец-то сделала шаг, и неважно, преданный ты фанат iPhone или нет — эта перемена серьёзно затрагивает веб-разработчиков.

Я слежу за этой темой пристально (и, возможно, провёл неприлично много времени с симулятором Surface Duo на выходных), и вот что могу сказать: веб-API для этих устройств уже удивительно зрелые. Apple выпустила шесть видео о разработке под Duo, и хотя большая часть — это нативная iOS-территория, для веб-разработчиков оставили вполне интересные инструменты.

Разберёмся, что можно использовать уже сегодня.

Device Posture API: знай состояние своего устройства

Первый номер — Device Posture API. Эта удобная штука сообщает, смотрит ли пользователь на плоский экран, сложенный дисплей или что-то среднее. Представь, что устройство отчитывается тебе о своём физическом состоянии.

В JavaScript доступ идёт через navigator.devicePosture, который вернёт continuous для обычного плоского дисплея или folded для частично закрытого — как ноутбук. В CSS всё ещё элегантнее:

@media (device-posture: folded) {
  .app-container {
    flex-direction: column;
  }
}

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

Viewport Segments API: деление на сегменты

Если Device Posture API отвечает на вопрос «в каком состоянии устройство», то Viewport Segments API описывает его «анатомию». Когда складной телефон частично закрыт, он создаёт отдельные экранные зоны, и этот API позволяет программно запрашивать информацию о них.

В JavaScript window.visualViewport.segments возвращает массив DOMRect-объектов с описанием размера, формы и позиции каждого сегмента. В CSS возможностей ещё больше:

/* Адаптируем layout под количество сегментов */
@media (horizontal-viewport-segments: 2) {
  .content-grid {
    grid-template-columns: env(viewport-segment-width 0 0) env(viewport-segment-width 1 0);
  }
}

CSS-переменные окружения здесь особенно изящны. env(viewport-segment-width 1 0) возвращает ширину сегмента с горизонтальным индексом 1 и вертикальным индексом 0. Координатная система поначалу сбивает с толку, но когда поймёшь логику — возможности становятся безграничными.

Почему это важно для твоих проектов

Вот в чём дело — складные телефоны давно перестали быть нишевым продуктом. Они становятся мейнстримом, а веб-API уже готовы их поддерживать.

Для стартапов и разработчиков это совершенно новые сценарии взаимодействия. Туристическое приложение может показывать карту на одном экране, а детали бронирования — на другом. Интернет-магазин — товары слева, отзывы справа. Редактор кода наконец даст мобильным разработчикам настоящий split-view без необходимости писать нативное приложение.

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

С чего начать

Лучшая часть? Не нужно срочно бежать за складным телефоном, чтобы экспериментировать. Safari Technology Preview и Chrome DevTools уже поддерживают симуляцию этих API. Поднимай виртуальное устройство, переключайся между плоским и сложенным состояниями и наблюдай, как лейауты адаптируются в реальном времени.

Если у тебя бизнес-сайт или веб-приложение — сейчас самое время провести аудит стратегии адаптивного дизайна. Вопрос не в том, будут ли складные телефоны иметь значение — вопрос в том, будешь ли ты готов, когда пользователи начнут приходить с ними.

Веб-платформа продолжает развиваться захватывающими способами, и подобные API доказывают: она способна двигаться быстро, когда железо подбрасывает новые сценарии взаимодействия. Твоя очередь — подумай о foldable.