режим отображения

Ограниченная доступность

Эта функция не является базовой, так как она не работает в некоторых из наиболее широко используемых браузеров.

Свойство CSS media feature можно использовать для проверки, отображается ли веб-приложение в обычной вкладке браузера или каким-либо другим способом, например, в виде автономного приложения или в полноэкранном режиме.

Например:

Приложения прогрессивные веб-приложения могут установить свой режим отображения, задав член display в своем манифесте. В этом случае значение display-mode определяет установленное значение (хотя это может отличаться от запрошенного в манифесте значения, так как браузер может не поддерживать запрошенный режим).
Любое веб-приложение может использовать Fullscreen API или Document Picture-in-Picture API для установки режима отображения, и в этом случае значение display-mode определяет установленный режим.

Значение display-mode применяется к основному контексту просмотра и всем дочерним контекстам просмотра.

Синтаксис

Функция display-mode задается как ключевое слово, выбранное из списка ниже.

browser: Приложение открывается в обычной вкладке браузера или новом окне в зависимости от браузера и платформы.
fullscreen: Используется вся доступная область отображения, и не отображается никакая панель управления браузера. Это можно использовать для применения CSS только при переходе приложения в полноэкранный режим с помощью Fullscreen API или с помощью значения fullscreen члена display манифеста веб-приложения.
minimal-ui: Приложение будет выглядеть и вести себя как автономное приложение, но будет иметь минимальный набор элементов пользовательского интерфейса для управления навигацией. Элементы могут различаться в зависимости от браузера.
picture-in-picture: Этот режим позволяет пользователям продолжать просмотр определенного контента, взаимодействуя с другими сайтами или приложениями на их устройстве. Приложение отображается в плавающем окне, всегда находящемся поверх других окон. Это можно использовать для применения CSS только при переходе приложения в режим «картинка в картинке» с помощью Document Picture-in-Picture API.
standalone: Приложение будет выглядеть и вести себя как автономное приложение. Это может включать в себя открытие приложения в отдельном окне, свой значок в загрузчике приложений и т. д. В этом режиме браузер скроет элементы управления навигацией, но может отображать другие элементы пользовательского интерфейса, такие как строка состояния.
window-controls-overlay: В этом режиме приложение выглядит и ведет себя как автономное настольное приложение, и функция Window Controls Overlay включена.

Примеры

Применение CSS при переходе приложения в полноэкранный режим

@media all and (display-mode: fullscreen) {
  body {
    margin: 0;
    border: 5px solid black;
  }
}

Предоставление светлой и тёмной цветовых схем для контента в режиме «картинка в картинке»

В этом примере мы сочетаем значение display-mode: picture-in-picture с медиа-функцией prefers-color-scheme для создания светлой и тёмной цветовых схем, применяемых в зависимости от предпочтений пользователя по цветовой схеме, только когда приложение отображается в режиме «картинка в картинке».

@media (display-mode: picture-in-picture) and (prefers-color-scheme: light) {
  body {
    background: antiquewhite;
  }
}

@media (display-mode: picture-in-picture) and (prefers-color-scheme: dark) {
  body {
    background: #333;
  }

  a {
    color: antiquewhite;
  }
}

Для получения дополнительной информации и полного примера см. Использование Document Picture-in-Picture API.

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

Спецификация
Media Queries Level 5 # display-modes

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`display-mode`	42	79	47 Firefox 47 и более поздние версии поддерживают значения `display-mode` `fullscreen` и `browser`. Firefox 57 добавила поддержку значений `minimal-ui` и `standalone`.	29	13	42	47 Поддерживает только значение `browser`, которое всегда сообщает `true`.	29	12.2	4.0	42
`picture-in-picture`	123	123	Нет	109	Нет	Нет	Нет	Нет	Нет	Нет	Нет

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/display-mode