Запрос мультимедиа сегментов окна просмотра CSS для обнаружения двойного экрана

  • Статья

Функцию CSSmedia можно использовать для проверки того, является ли выходное устройство двухэкранным (или свертываемым), а окно просмотра браузера охватывается двумя регионами отображения. Переменные среды также доступны для вычисления видимых областей на экранах и области петли (если таковые имеются) между ними.

Этот API доступен в Microsoft Edge версии 97 и более поздних версий.

Сегменты окна просмотра

Синтаксис CSS для объявления стилей при диапазоне браузера по горизонтали или вертикали:

@media (horizontal-viewport-segments: <count>) { }
@media (vertical-viewport-segments: <count>) { }

Для Surface Duo значения, которые будут соответствовать экрану с двумя экранами:

horizontal-viewport-segments: 2

  • Описывает состояние, когда окно просмотра браузера охватывает одну свертку (две области отображения) и положение свертывания является вертикальным. Это значение соответствует Surface Duo в двойном книжном (широком) режиме.

vertical-viewport-segments: 2

  • Описывает состояние, когда окно просмотра браузера охватывает одну свертку (две области отображения) и положение свертывания является горизонтальным. Это значение соответствует Surface Duo в режиме двойного ландшафта (высокий).

В этом примере фрагмента CSS показано, как использовать -viewport-segments функции мультимедиа для применения стилей в Surface Duo:

@media (horizontal-viewport-segments: 2) {
   /* styles applied in double-portrait (wide) mode */
   /* matches Figure 1. below */
}
@media (vertical-viewport-segments: 2) {
   /* styles applied in double-landscape (tall) mode */
   /* matches Figure 2. below */
}

Surface Duo's two orientations, double portrait and double landscape

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

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

env(viewport-segment-width <x> <y>);
env(viewport-segment-height <x> <y>);
env(viewport-segment-top <x> <y>);
env(viewport-segment-left <x> <y>);
env(viewport-segment-bottom <x> <y>);
env(viewport-segment-right <x> <y>);

Координаты назначаются из левого верхнего сегмента:

CSS env variable coordinates example

Эти значения можно использовать для вывода координат областей петли:

CSS env variables on a dual-screen device in double portrait mode

/* double-portrait */
env(viewport-segment-right 0 0);      /* hinge left */
env(viewport-segment-left 1 0);       /* hinge right*/
calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0)) 
                                      /* hinge width */
/* double-landscape */
env(viewport-segment-bottom 0 0);     /* hinge top */
env(viewport-segment-top 0 1);        /* hinge bottom */
calc(env(viewport-segment-top 0 1) - env(viewport-segment-bottom 0 0)) 
                                      /* hinge height */

Примеры

Basic

Создайте адаптивную страницу, <body> на которой цвет фона установлен yellow на телефонах и green на устройствах с двумя экранами в любом расположении.

Illustration of the basic example output

/* maximum width of our customers phones is 420px */
/* spanning: none is optional in this case */
@media (max-width: 420px) {
   body {
      background-color: yellow;
   }
}

/* Separating media features with comma `,` is equivalent to the logical operation OR  */
@media (horizontal-viewport-segments: 2), (vertical-viewport-segments: 2) {
   body {
      background-color: green;
   }
}

Flexbox

Используйте flexbox для создания макета двух столбцов с учетом пробела, где первый столбец содержит прокручиваемое описание, а второй столбец содержит изображение.

Dual-screen CSS demo

Ниже приведены html-коды и CSS для создания этого макета:

   <body>
      <article class="article">
         ...
      </article>
      <figure class="figure">
         <img src="/sydney-opera-house.jpg"
               alt="Sydney Opera House">
      </figure>
   </body>

body {
   height: 100vh;
   display: flex;
}

.article {
   /* grow: no, shrink: no, basis: fold-left */
   flex: 0 0 env(viewport-segment-right 0 0);

   /* equals to margin-right when writing mode is left-to-right (english)  */
   /* equals to margin-left when writing mode is right-to-left (arabic, hebrew)  */
   /* this will prevent content from being rendered behind the device mask */
   margin-inline-end: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0)) ; /* hinge width */

   overflow-y: scroll;
}

.figure {
   /* fill the rest of the space */
   flex: 1;

   margin: 0;
   overflow: hidden;
}

.figure img {
   height: 100%;
}