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

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

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

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

Если 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 .

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

@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;
  }
}

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

Будущее

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

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

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

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