Медиафункция CSS `device-posture`

Медиафункцию device-posture CSS можно использовать, чтобы определить текущее положение устройства, то есть находится ли область просмотра в плоском (continuous) или сложенном состоянии (folded).

Синтаксис

Функция device-posture задаётся ключевым словом, выбранным из списка ниже:

continuous

Обозначает плоское состояние экрана. Складные устройства находятся в состоянии continuous, когда они сложены в плоскость: полностью раскрыты или полностью закрыты. Нескладные устройства считаются плоскими и поэтому всегда находятся в состоянии continuous — сюда входят бесшовные изогнутые дисплеи, а также стандартные экраны настольных компьютеров, ноутбуков, планшетов и мобильных устройств.

folded

Обозначает сложенное состояние экрана. Складные устройства находятся в состоянии folded, когда используются в положении книги или ноутбука.

Примеры

В этом примере медиафункция device-posture определяет, когда устройство находится в сложенном положении, и добавляет отступ на основе его orientation, создавая более широкий промежуток между двумя панелями приложения для удобства чтения.

@media (device-posture: folded) and (orientation: landscape) {
  .list-view {
    margin-inline-end: 60px;
  }
}

@media (device-posture: folded) and (orientation: portrait) {
  .list-view {
    margin-block-end: 60px;
  }
}

Чтобы посмотреть приведённый выше код в действии, откройте демонстрацию Device Posture API, по возможности на складном устройстве. Современные инструменты разработчика браузеров позволяют эмулировать складные устройства, но не поддерживают эмуляцию частично сложенных устройств — только полностью раскрытых или закрытых, — поэтому они всегда будут возвращать continuous.

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

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

См. также

• DevicePosture
• Device Posture API
• Использование медиазапросов
• @media