CSS-трюк, который заставляет складные устройства работать

Шарнир устройства может изменить веб-страницу, а не только аппаратное обеспечение. Медиа-функция CSS device-posture предлагает мощный способ адаптации веб-контента. Она различает continuous экран, например, плоский планшет, и folded положение, позволяя стилям напрямую реагировать на физическое состояние устройства.

Недавнее видео от Better Stack продемонстрировало это, показав страницу, которая менялась с «плоской» на «сложенную», когда гипотетическое складное устройство Apple сгибалось. Хотя в видео упоминается «складной телефон за $2000» или «iPhone Surface Duo», Apple не анонсировала такой продукт; это спекулятивные примеры для иллюстрации технологии.

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

Google Chrome уже поддерживает эти функции, а Samsung Internet предлагает аналогичные возможности в течение многих лет для таких устройств, как Galaxy Z Fold. Safari реализовал API в симуляторе «iPhone Surface Duo», хотя они остаются скрытыми за флагом функции, что указывает на раннюю стадию разработки, а не на общую доступность. Firefox пока не поддерживает эти функции.

Так же, как CSS адаптируется к физическому состоянию устройства, JavaScript предлагает мощный аналог: Device Posture API. Вы можете получить доступ к текущему положению через navigator.devicePosture и, что более важно, отслеживать изменения с помощью события change. Это событие срабатывает всякий раз, когда устройство переходит между состояниями, такими как continuous (плоское) и folded (сложенное), позволяя вашему веб-приложению реагировать динамически.

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

Помните, что положение — это сигнал, а не инструкция для пользователя. Избегайте сюрпризов для пользователей, кардинально меняя основные функции или делая действия труднодоступными только из-за того, что устройство согнулось. Вместо этого используйте эти сигналы для улучшения взаимодействия, гарантируя, что основные действия остаются интуитивно понятными и доступными независимо от того, плоский экран или сложенный. Google Chrome и Samsung Internet уже поддерживают эти функции, предлагая надежные инструменты для создания адаптивных интерфейсов.

Физические шарниры на складных устройствах — это не просто аппаратные особенности; они могут разделить один дисплей на несколько сегментов области просмотра (viewport segments). Это означает, что сложенный экран может открывать отдельные логические области, позволяя разработчикам назначать дополнительный контент для каждой стороны. Вместо того чтобы неудобно размещать ключевые элементы управления или контент прямо через сгиб, вы можете проектировать отдельные панели.

Рассмотрим видеоплеер: когда устройство плоское, он может занимать весь экран. Но в сложенном состоянии вы можете оставить воспроизведение видео на одном сегменте, а на другом отображать главы, описания или комментарии. Это создает более интуитивно понятный и эффективный пользовательский интерфейс, максимально используя уникальный форм-фактор.

CSS предлагает segment media features, такие как horizontal-viewport-segments и vertical-viewport-segments, для обнаружения и стилизации этих отдельных областей. Вы можете точно задавать размеры элементов, используя переменные окружения, такие как env(viewport-segment-width 0 0) или env(viewport-segment-height 0 0) внутри выражений calc(). Это помогает избежать размещения важных элементов интерфейса непосредственно над физическим шарниром.

Несмотря на мощность этих инструментов, всегда следите за тем, чтобы ваши макеты корректно отображались на традиционных сплошных экранах. Google Google Chrome и Samsung Internet поддерживают эти функции уже много лет, а WebKit также добивается прогресса, скрывая их за флагами. Для получения более глубоких технических подробностей изучите спецификацию Device Posture API - W3C.

Итак, где сегодня можно реально использовать эти умные функции для складных устройств? Google Google Chrome и Samsung Internet лидируют, предлагая надежную поддержку device-posture и сегментов области просмотра. Samsung Internet впервые представил эти функции много лет назад для своих устройств Galaxy Z Fold и Flip, в то время как Google Google Chrome недавно перевел их из стадии пробных версий (origin trials) в базовую поддержку.

Firefox, к сожалению, в настоящее время не поддерживает эти API. Safari и WebKit продемонстрировали некоторые экспериментальные наработки в специальном симуляторе "iPhone Surface Duo", но эти функции остаются скрытыми за флагом и не являются общедоступными. Всегда проверяйте актуальные MDN references и таблицы совместимости браузеров, так как поддержка быстро меняется с каждой новой версией браузера.

При разработке для складных устройств используйте прогрессивное улучшение. Во-первых, проверяйте наличие navigator.devicePosture перед попыткой его использования. Во-вторых, разработайте полезный базовый макет, который хорошо работает на всех сплошных экранах, а затем добавляйте стили, специфичные для складных устройств.

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

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

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

Как сегменты области просмотра (viewport segments) помогают со складными экранами?

Они открывают доступ к отдельным областям сегментированного дисплея, чтобы страница могла размещать контент по обе стороны от шарнира или сгиба.

Может ли JavaScript определить, когда складной телефон меняет положение?

Да. Device Posture API предоставляет текущее положение и событие изменения, которое позволяет странице реагировать, когда оно меняется.

Все ли браузеры поддерживают веб-API для складных устройств?

Нет. Поддержка варьируется: браузеры на базе Chromium и Samsung Internet предлагают такие возможности, в то время как в Firefox реализация отсутствует, а поддержка в Safari носит экспериментальный характер.

Выпустила ли Apple складной iPhone?

Складной iPhone не был анонсирован. В видео обсуждается гипотетическое устройство и упоминаются экспериментальные работы в Safari, а не подтвержденный продукт Apple.