display-mode

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Die display-mode CSS Medienfunktion kann verwendet werden, um zu überprüfen, ob eine Web-App auf einem normalen Browser-Tab oder auf andere Weise, wie beispielsweise als eigenständige App oder im Vollbildmodus, angezeigt wird.

Zum Beispiel:

  • Eine Progressive Web App kann ihren Anzeigemodus festlegen, indem sie das display-Element in ihrem Manifest setzt. In diesem Fall identifiziert der Wert von display-mode den gesetzten Wert (beachten Sie jedoch, dass dies nicht unbedingt derselbe Wert sein muss, der im Manifest angefordert wurde, da ein Browser den angeforderten Modus möglicherweise nicht unterstützt).

  • Jede Web-App kann die Fullscreen-API oder die Document Picture-in-Picture API verwenden, um den Anzeigemodus festzulegen. In diesem Fall identifiziert der Wert von display-mode den gesetzten Modus.

Der display-mode-Wert gilt für den obersten Browsing-Kontext und alle untergeordneten Browsing-Kontexte.

Syntax

Die display-mode-Funktion wird als Schlüsselwortwert aus der folgenden Liste angegeben.

browser

Die Anwendung öffnet sich in einem herkömmlichen Browser-Tab oder einem neuen Fenster, abhängig vom Browser und der Plattform.

fullscreen

Der gesamte verfügbare Anzeigebereich wird genutzt und keine User-Agent-Chrome wird angezeigt. Dies kann verwendet werden, um CSS nur anzuwenden, wenn die App durch die Fullscreen-API oder durch Verwendung des fullscreen-Wertes des display-Elements des Web App Manifests in den Vollbildmodus versetzt wurde.

minimal-ui

Die Anwendung wird wie eine eigenständige Anwendung aussehen und sich anfühlen, aber eine minimale Menge an UI-Elementen zur Steuerung der Navigation haben. Die Elemente variieren je nach Browser.

picture-in-picture

Dieser Modus ermöglicht es Benutzern, spezifische Inhalte weiter konsumieren zu können, während sie mit anderen Websites oder Anwendungen auf ihrem Gerät interagieren. Die App wird in einem schwebenden und immer im Vordergrund stehenden Fenster angezeigt. Dies kann verwendet werden, um CSS nur anzuwenden, wenn die App durch die Document Picture-in-Picture API in den Picture-in-Picture-Modus versetzt wurde.

standalone

Die Anwendung wird wie eine eigenständige Anwendung aussehen und sich anfühlen. Dies kann beinhalten, dass die Anwendung ein eigenes Fenster, ein eigenes Icon im Anwendungsstarter usw. hat. In diesem Modus wird der User Agent UI-Elemente zur Steuerung der Navigation ausschließen, kann aber andere UI-Elemente wie eine Statusleiste einschließen.

window-controls-overlay

In diesem Modus sieht die Anwendung aus und fühlt sich an wie eine eigenständige Desktop-Anwendung, und das Window Controls Overlay-Feature ist aktiviert.

Beispiele

CSS anwenden, wenn die Anwendung im Vollbildmodus ist

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

Eine helle und dunkle Farbgestaltung für Picture-in-Picture-Inhalte bereitstellen

In diesem Beispiel kombinieren wir den display-mode: picture-in-picture-Wert mit der prefers-color-scheme-Medienfunktion, um helle und dunkle Farbschemata zu erstellen, die basierend auf der Farbschemavorliebe des Benutzers angewendet werden, nur wenn die App im Picture-in-Picture-Modus angezeigt wird.

css
@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;
  }
}

Siehe Verwendung der Document Picture-in-Picture API für weitere Informationen und ein vollständiges Beispiel.

Spezifikationen

Specification
Media Queries Level 5
# display-modes

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
display-mode media feature
picture-in-picture value
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

Siehe auch