Limited support Useful when display-mode media query helps adapt the interface to user preferences, display capability, or environment conditions.

display-mode media query

The display-mode CSS media feature can be used to test whether a web app is being displayed in a normal browser tab or in some alternative way, such as a standalone app or fullscreen mode.

For example:

A progressive web app can set its display mode by setting the display member in its manifest. In this case, the value of display-mode identifies the value that was set (but note that this may not be the same as the value requested in the manifest, since a browser may not support the requested mode).

Any web app can use the Fullscreen API or the Document Picture-in-Picture API to set the display mode, and in this case the value of display-mode identifies the mode that was set.

The display-mode value applies to the top-level browsing context and any child browsing contexts.

Media queries

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.at-rules.media.display-mode
42
79
47
13
42
12.2
CSS at-rule
display-mode.browser

`browser` value
42
79
47
13
42
12.2
display-mode.fullscreen

`fullscreen` value
47
79
47
13
12.2
display-mode.minimal-ui

`minimal-ui` value
42
79
57
13
42
12.2
display-mode.standalone

`standalone` value
42
79
57
13
42
12.2
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
  • In a Safari browser window, `display-mode: browser` is always true, even in a macOS Full Screen window or when using the Fullscreen API. In an installed web application, other `display-mode` values are true only when given by a supported manifest `display` member value. See mdn/browser-compat-data#18807 (comment).
Notes 1 item(s)
Implementation note
  • In the Safari app, `display-mode: browser` is always true, even when using the Fullscreen API. In an installed web application, other `display-mode` values are true only when given by a supported manifest `display` member value. See mdn/browser-compat-data#18807 (comment).
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • In Firefox's "Full Screen" user interface, browser tabs and other user interface appear but `display-mode: fullscreen` is true.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • In a Safari browser window, `display-mode: fullscreen` is never true, even when using the Fullscreen API. See mdn/browser-compat-data#18807 (comment).
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • In the Safari app, `display-mode: fullscreen` is never true, even when using the Fullscreen API. See mdn/browser-compat-data#18807 (comment).
  • In an installed web application with the `display` manifest member set to `standalone`, `display-mode: fullscreen` is true, even though the system status bar is visible. See bug 264218.
Notes 1 item(s)
Implementation note
  • `display-mode: minimal-ui` is never true.
Notes 1 item(s)
Implementation note
  • `display-mode: minimal-ui` is never true.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • `display-mode: minimal-ui` is never true.
Notes 1 item(s)
Implementation note
  • `display-mode: standalone` is never true.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • In an installed web application with the `display` manifest member set to `standalone`, `display-mode: standalone` is false and `display-mode: fullscreen` is true. See bug 264218.

Syntax

CSS 
@media (display-mode: standalone) {
  .install-button { display: none; }
  .app-header { padding-top: env(safe-area-inset-top); }
}

Live demo

standalone

CSS Standalone demo.

PreviewFullscreen

fullscreen

CSS Fullscreen demo.

PreviewFullscreen

browser

CSS Browser demo.

PreviewFullscreen

Use cases

  • Adaptive styling

    Use display-mode media query to tailor layout or presentation to device features and user settings.

  • Progressive enhancement

    Keep the default experience solid, then layer in device-specific or preference-aware improvements.

Cautions

  • Do not rely on a media condition as the only path to essential functionality.
  • Document the breakpoint or environment strategy so conditions stay consistent across the codebase.

Accessibility

  • Media-query adaptations should preserve keyboard access, reading order, and touch usability.
  • Preference-aware styling should enhance accessibility rather than replace baseline accessible defaults.

Related links