Как CSS помогает верстать под складные устройства
Designing for Dual Screen and Foldable Devices with CSS (2023)
С выходом Google Pixel Fold Стефани Стимак напоминает, что для складных устройств уже есть медиазапросы horizontal-viewport-segments и vertical-viewport-segments, а также переменные окружения viewport-segment-*. Они позволяют автоматически подстраивать макет под два экрана и стык без создания отдельных дизайнов под каждую модель. В статье разобран пример рецепта на CSS Grid, показана поддержка в Microsoft Edge и даны рекомендации, когда стоит добавлять двухэкранный режим.
Когда я только начала говорить о дизайне для двух экранов, многие реагировали негативно. И, честно говоря, никто не заставляет вас создавать сайт или приложение, которое адаптируется при развёртывании на двух дисплеях.
- socalgal2
Не уверен, что меня это убедило.
Если разделение интерфейса полезно, то, кажется, нужно просто дать мне возможность выбрать разделение даже на одном экране, а не решать за меня. У моего ноутбука соотношение сторон экрана похоже на развёрнутый складной телефон, так что если разделение каждой половины экрана на две панели полезно, оно должно быть полезным независимо от устройства.
Лично я, если бы купил складной телефон, вероятно, купил бы его именно потому, что хочу больший экран для существующего контента. Я не хочу, чтобы ваше приложение решало за меня, обращаясь с ним как с двумя экранами. Представьте, что в vi или emacs панели автоматически разделяются в зависимости от соотношения сторон, как показано в статье. Нет, пожалуйста! Дайте мне самому выбирать, когда я хочу разделения
- ChiperSoft
И, конечно, Safari пока не поддерживает это даже в технологических превью.
- DarmokTanagra
UX экрана Apple Duo предполагает, что вся планета — правши.
Новый Duo демонстрирует недочёты UX масштаба Apple Mouse.