Смартфон Apple за $2 тыс. скрывает секрет CSS

Недавний анонс Apple смартфона iPhone Duo по цене $1,999 стал поворотным моментом для веб-разработки. Это устройство, которое поступит в продажу 23 октября 2026 года и оснащено внешним 5,4-дюймовым и внутренним 7,6-дюймовым дисплеями, превращает складные телефоны из нишевой диковинки в повседневную реальность для всех веб-разработчиков. Игнорировать эти адаптивные форм-факторы больше нельзя.

К счастью, разработчики браузеров предвидели этот сдвиг. Теперь у нас есть мощный CSS-медиазапрос @media (device-posture: folded), разработанный специально для таких устройств. Этот запрос определяет, находится ли устройство в состоянии folded (сложенном), как книга или миниатюрный ноутбук, а не в continuous (развернутом) плоском состоянии. Это позволяет разработчикам применять целевые стили для обеспечения оптимального пользовательского опыта при различных физических конфигурациях.

Представьте себе пост в блоге. На плоском, continuous экране одноколоночная верстка работает идеально, обеспечивая максимальную читабельность. Однако, когда пользователь складывает свой iPhone Duo в положение «книжки», эту единственную колонку может стать неудобно читать из-за сгиба. С помощью device-posture вы можете легко переключиться на двухколоночную верстку, элегантно разместив контент на каждом сегменте экрана, что мгновенно повысит удобство использования и взаимодействия.

Эта простая адаптация демонстрирует непосредственную мощь медиазапроса device-posture. Теперь разработчики могут создавать адаптивные дизайны, которые плавно подстраиваются не только под размер экрана, но и под физическую модель взаимодействия с самим устройством. Chrome уже поддерживает эти функции, а симулятор iPhone Duo в Safari также включает их, пусть и за флагом, что сигнализирует об их скорой повсеместной доступности.

Помимо статических CSS-правил, веб-интерфейсы для складных устройств по-настоящему раскрываются благодаря динамическим взаимодействиям. Device Posture API для JavaScript позволяет вашему сайту реагировать на то, как пользователь держит свой iPhone Duo или другое складное устройство, обеспечивая более богатый и интуитивно понятный опыт. Это выходит за рамки простого стилизования для плоских или сложенных состояний, позволяя реагировать в режиме реального времени.

Ваше приложение может отслеживать событие change состояния устройства, запуская действия всякий раз, когда телефон переходит из состояния continuous (плоское) в folded (сложенное). Это означает, что вы можете автоматически приостановить видео, когда пользователь начинает закрывать телефон, или мгновенно сохранить прогресс заполнения формы при смене положения устройства. Представьте приложение с рецептами, которое показывает ингредиенты на одном экране, а инструкции — на другом, динамически разделяя контент по мере складывания устройства.

Обнаружение изменений состояния складывания с помощью JavaScript довольно просто. Вот базовый фрагмент кода:

if ('ondeviceposturechange' in window) { window.addEventListener('deviceposturechange', (event) => { const currentPosture = event.target.devicePosture.type; console.log(`Device posture changed to: ${currentPosture}`); // Реализуйте динамические действия здесь на основе currentPosture ('continuous' или 'folded') });
}

Этот обработчик событий предоставляет devicePosture.type, позволяя вам создавать более интерактивные и интуитивно понятные веб-интерфейсы для складных устройств. Chrome и Samsung Internet уже полностью поддерживают этот API, в то время как симулятор iPhone Duo в Safari включает его за флагом функции, что указывает на будущую поддержку для устройства Apple за $1,999.

Складные устройства представляют захватывающую концепцию: сегменты области просмотра (viewport segments). Когда iPhone Duo сложен, он предлагает две отдельные области отображения, каждой из которых можно управлять независимо. Это выходит за рамки простого реагирования на сгиб; вы можете проектировать полноценные двухэкранные интерфейсы, рассматривая каждый сегмент как отдельный холст.

Для точного размещения контента разработчики используют переменные окружения (environment variables) CSS. Например, env(viewport-segment-width) и env(viewport-segment-height) предоставляют размеры каждого отдельного сегмента. Это позволяет создавать мощные адаптивные макеты, гарантируя, что элементы идеально выравниваются вокруг физического шарнира или зазора.

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

Chrome уже поддерживает эти функции, а Viewport Segments API доступен начиная с Chrome 138. Samsung Internet предлагает эту функциональность на своих складных телефонах уже много лет. Хотя симулятор iPhone Duo для Safari, выпущенный в составе Xcode 27.1, включает эти API за флагом функции (feature flag), вы можете изучить связанные функции CSS, такие как device-posture, подробнее в device-posture CSS media feature - MDN Web Docs.

Мы изучили «почему» в контексте дизайна для складных устройств; теперь давайте посмотрим на «где». Хорошие новости: многие инструменты готовы уже сегодня! Chrome предлагает стабильную поддержку медиа-запроса device-posture и JavaScript API, включая Viewport Segments API, доступный с Chrome 138. Это означает, что значительная часть рынка складных Android-устройств уже может использовать ваши улучшенные макеты. Samsung Internet годами продвигает эти функции, обеспечивая надежную работу для своего огромного парка складных устройств.

Путь Safari только начинается. Новый симулятор iPhone Duo, выпущенный в Xcode 27.1, примечателен тем, что включает как device-posture, так и API сегментов области просмотра. Это сигнализирует о четком намерении Apple поддерживать данные возможности. Однако в настоящее время эти функции скрыты за флагом функции (feature flag), что означает, что, хотя Apple готовится к выпуску iPhone Duo стоимостью $1,999 23 октября 2026 года, полная поддержка может быть не включена к моменту запуска.

Итак, что делать разработчику? Используйте прогрессивное улучшение (progressive enhancement)! Спроектируйте базовый интерфейс так, чтобы он был надежным и доступным во всех браузерах, включая те, где нет API для складных устройств, например, Firefox. Затем добавьте расширенные функции device-posture и сегменты области просмотра в качестве улучшений. Эта стратегия обеспечивает превосходный, адаптированный опыт для пользователей на подходящих складных устройствах — например, разделение экрана для видео и заметок — без ущерба для функциональности для всех остальных. Речь идет о плавном адаптировании, а не о поломке.

Что такое медиа-запрос CSS device-posture?

Это новая медиа-функция CSS, которая позволяет веб-страницам адаптировать свой макет в зависимости от физического состояния устройства. Она имеет два основных значения: continuous для плоского экрана и folded для случаев, когда экран согнут или находится в шарнирном соединении.

Как управлять контентом на обеих сторонах сложенного экрана?

Вы можете использовать Viewport Segments API. Переменные окружения CSS, такие как viewport-segment-width и viewport-segment-height, позволяют стилизовать отдельные области экрана по обе стороны от сгиба, создавая двухэкранные интерфейсы.

Какие браузеры в настоящее время поддерживают функции CSS для складных устройств?

Chrome и Samsung Internet имеют полную поддержку медиа-запроса device-posture и API Viewport Segments. Поддержка в Safari доступна в симуляторе iPhone Duo, но в настоящее время скрыта за флагом функции. Firefox пока не имеет поддержки.

В чем разница между CSS медиа-запросом и JavaScript API для складных устройств?

CSS медиа-запрос device-posture является декларативным и используется для стилизации макетов в зависимости от состояния устройства. JavaScript API Device Posture является императивным, позволяя выполнять код в ответ на события складывания, например, для приостановки видео или сохранения данных.