Медиавозможность CSS `horizontal-viewport-segments`

Медиавозможность CSS CSS horizontal-viewport-segments определяет, имеет ли устройство заданное количество сегментов области просмотра, расположенных горизонтально (рядом друг с другом).

Связанная с API сегментов области просмотра, возможность vertical-viewport-segments может использоваться для создания адаптивных дизайнов, которые хорошо работают на устройствах с несколькими областями просмотра — устройствах с дисплеем, разделённым на логически отдельные сегменты области просмотра, например складных устройствах или устройствах с шарниром.

Синтаксис

Медиавозможность horizontal-viewport-segments задаётся значением <integer> 1 или больше, которое представляет количество горизонтальных сегментов области просмотра устройства.

• Значение будет равно 1 для:
  • Нескладного устройства (например, обычного смартфона или планшета с одним экраном)
  • Складного устройства, которое разложено или закрыто (в положении устройства continuous).
  • Устройства с двумя экранами на шарнире или складного устройства, которое в данный момент сложено и расположено вертикально, так что сегменты находятся один над другим.
• Значение будет равно 2 для устройства с двумя экранами на шарнире или складного устройства, которое в данный момент сложено (в положении устройства folded) и расположено горизонтально, так что сегменты находятся рядом друг с другом.
• Для складных устройств с более чем одним сгибом значение может быть больше 2.

Примеры

Базовое использование horizontal-viewport-segments

В этом примере мы используем медиазапрос horizontal-viewport-segments, чтобы обработать случай складных устройств, у которых сегменты расположены рядом друг с другом.

Мы задаём ширину левого контейнера равной ширине левого сегмента (env(viewport-segment-width 0 0)), а ширину правого контейнера — равной ширине правого сегмента (env(viewport-segment-width 1 0)).

Чтобы вычислить ширину сгиба между ними, мы вычитаем смещение левого края правого контейнера из смещения правого края левого контейнера (calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));).

.wrapper {
  height: 100%;
  display: flex;
}

@media (horizontal-viewport-segments: 2) {
  .wrapper {
    flex-direction: row;
  }

  .list-view {
    width: env(viewport-segment-width 0 0);
  }

  .fold {
    width: calc(
      env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0)
    );
    background-color: black;
    height: 100%;
  }

  .detail-view {
    width: env(viewport-segment-width 1 0);
  }
}

Полный рабочий пример смотрите в нашей демонстрации API сегментов области просмотра (исходный код). Также ознакомьтесь с разделом Использование API сегментов области просмотра, где подробно объясняется демонстрационный пример.

Спецификации

Совместимость с браузерами

См. также

• vertical-viewport-segments @media feature
• API сегментов области просмотра
• Origin trial для API складных устройств на developer.chrome.com (2024)