Конфигурации экрана

Адаптивный веб-дизайн во многом был реакцией на мобильные телефоны. До появления смартфонов мало кто серьезно задумывался о том, как веб-сайты должны выглядеть и ощущаться на портативных устройствах. Ситуация изменилась с стремительным ростом количества мобильных телефонов со встроенными веб-браузерами.

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

Такое отзывчивое мышление сослужит вам добрую службу в будущем. Вполне возможно, что ваши веб-сайты будут просматриваться на устройствах и экранах, которые мы сегодня даже не можем себе представить. И этот образ мышления выходит за рамки экранов. Даже сейчас люди используют устройства без экранов для доступа к вашему контенту. Голосовые помощники могут использовать ваши веб-сайты, если вы используете прочную основу семантического HTML.

В мире экранов тоже есть эксперименты. Сегодня на рынке есть устройства со складными экранами. Это создает некоторые проблемы для ваших проектов.

Монтаж складных телефонов в разных конфигурациях.

Двойные экраны

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

Веб-сайт на двух экранах. Горизонтальный поток текста прерывается шарниром между экранами.

Сегменты видового экрана

Существует экспериментальная медиа-функция, предназначенная для определения того, отображается ли ваш веб-сайт на устройстве с двумя экранами. Предлагаемое имя медиа-функции — viewport-segments . Существует две разновидности: horizontal-viewport-segments и vertical-viewport-segments .

Если медиа horizontal-viewport-segments сообщает значение 2 , а vertical-viewport-segments — значение 1 , это означает, что шарнир на устройстве работает сверху вниз, разделяя ваш контент на две расположенные рядом панели.

@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
  // Styles for side-by-side screens.
}

Если медиа-функция vertical-viewport-segments сообщает значение 2 , а horizontal-viewport-segments сообщает значение 1 , то шарнир перемещается из стороны в сторону, разделяя ваш контент на две панели, одну поверх другой.

@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 1) {
  // Styles for stacked screens.
}
Диаграмма, демонстрирующая сегменты области просмотра.
Схема из Microsoft Edge Объяснители .

Если vertical-viewport-segments , и horizontal-viewport-segments сообщают значение 1 это означает, что веб-сайт отображается только на одном экране, даже если устройство имеет более одного экрана. Это эквивалентно отказу от использования каких-либо медиа-запросов.

Переменные среды

Медиа viewport-segments сама по себе не поможет вам спроектировать этот раздражающий шарнир. Вам нужен способ узнать размер петли. Вот где могут помочь переменные среды .

Переменные среды в CSS позволяют учитывать неудобные вмешательства в ваши стили. Например, вы можете создать дизайн вокруг «выемки» на iPhone X, используя значения среды safe-area-inset-top , safe-area-inset-right , safe-area-inset-bottom и safe-area-inset-left . Эти ключевые слова заключены в функцию env() .

body {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

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

body {
  padding-top: env(safe-area-inset-top, 1em);
  padding-right: env(safe-area-inset-right, 1em);
  padding-bottom: env(safe-area-inset-bottom, 1em);
  padding-left: env(safe-area-inset-left, 1em);
}

Чтобы эти переменные среды работали на iPhone X, обновите meta , который определяет информацию viewport :

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

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

Для складных экранов предлагаются шесть новых переменных среды: viewport-segment-width , viewport-segment-height , viewport-segment-top , viewport-segment-left , viewport-segment-bottom , viewport-segment-right .

Диаграмма, показывающая переменные среды для двух экранов.
Схема из Microsoft Edge Объяснители .

Вот пример макета с двумя столбцами, один шире другого.

@media (min-width: 45em) {
  main {
    display: flex;
    flex-direction: row;
  }
  main article {
    flex: 2;
  }
  main aside {
    flex: 1;
  }
}

Макет разделен на два экрана, при этом шарнир прерывает более широкую колонку.

Для двойных экранов с вертикальным шарниром установите первый столбец равным ширине первого экрана, а второй столбец — ширине второго экрана.

@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
  main article {
    flex: 1 1 env(viewport-segment-width 0 0);
  }
  main aside {
    flex: 1;
  }
}

Макет равномерно разделен на два экрана без видимых прерываний.

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

Схема, иллюстрирующая службу определения местоположения, разделенную на два экрана: карта на одном экране и указания на другом.
Схема из Microsoft Edge Объяснители .

Будущее

Станут ли складные дисплеи следующим большим событием? Кто знает. Никто не мог предсказать, насколько популярными станут мобильные устройства, поэтому стоит непредвзято относиться к будущим форм-факторам.

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

Проверьте свое понимание

Проверьте свои знания о конфигурациях экрана

Какой медиа-запрос нацелен на складное устройство в альбомном режиме?

@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1)
Экран настроен с 2 столбцами и 1 строкой, разделенной альбомной ориентацией.
@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 1)
2 строки и 1 столбец, разделенный портрет.
@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 2)
2 строки и 2 столбца, разделенные на 4 части.
@media (vertical-viewport-segments: 1) and (horizontal-viewport-segments: 1)
Одна ячейка, без разделений.

Что такое переменные среды? Например env(safe-area-inset-top)

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