Как с помощью CSS определить полноэкранный режим

CSS медиа-запрос (@media) display-mode можно использовать для проверки режима отображения приложения. Это согласуется с секцией display Web app manifest’s, которые являются частью набора веб-технологий, называемых прогрессивными веб-приложениями (PWA), представляющих веб-сайты, которые можно установить на домашний экран устройства.

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

Значение для display – это строка, которая определяет предпочтительный режим отображения для веб-сайта разработчиками.

Режим отображения влияет на объем пользовательского интерфейса браузера, предоставляемый пользователю. У него может быть несколько вариантов значений от browser (когда отображается нормальное окно браузера) до fullscreen (когда приложение работает в полноэкранном режиме).

Возможные значения для display:

browser – приложение открывается в обычной вкладке браузера или в новом окне, в зависимости от браузера и платформы.
minimal-ui – приложение будет выглядеть и работать как отдельное, но будет иметь минимальный набор элементов пользовательского интерфейса для управления навигацией. Элементы зависят от браузера.
standalone – приложение будет выглядеть как отдельное, с собственным окном, значком для запуска приложения и т.д. В этом режиме будут исключаться элементы пользовательского интерфейса для управления навигацией, но могут включаться другие, например, строка состояния.
fullscreen – используется вся доступная область отображения без элементов пользовательского интерфейса.

Опция fullscreen (полноэкранного режима), как следует из названия, определяет, находится ли устройство в полноэкранном режиме. Основываясь на этом, с помощью медиа-запроса display-mode можно применить или изменить некоторый CSS. Вот как можно написать этот медиа-запрос:

@media all and (display-mode: fullscreen) {
  /* здесь можно написать CSS,
  который будет работать только
  в полноэкранном режиме */
  body {
    background-color: yellow;
  }
}

Если для полноэкранного режима нужно выполнять какой-то Javascript, можно использовать метод window.matchMedia() и прикрепить к нему обработчик, который будет наблюдать за изменениями, например:

window.matchMedia('(display-mode: fullscreen)')
  .addListener(({ matches }) => {
    if (matches) {
      // fullscreen включен
    } else {
      // fullscreen выключен
    }
});

Подробнее о методе window.matchMedia() можно почитать здесь.

Как с помощью CSS определить полноэкранный режим

Навигация по разделу