Запрос мультимедиа сегментов окна просмотра 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 */
}
Переменные среды 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>);
Координаты назначаются из левого верхнего сегмента:
Эти значения можно использовать для вывода координат областей петли:
/* 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
на устройствах с двумя экранами в любом расположении.
/* 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 для создания макета двух столбцов с учетом пробела, где первый столбец содержит прокручиваемое описание, а второй столбец содержит изображение.
Ниже приведены 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%;
}