Web/CSS/@media/display-mode

The display-mode CSS media feature can be used to test the display mode of an application. You can use it to provide a consistent user experience between launching a site from a URL and launching it from a desktop icon.

This feature corresponds to the Web app manifest's display member. Both apply to the top-level browsing context and any child browsing contexts. The feature query applies regardless of whether a web app manifest is present.

Syntax

The display-mode feature is specified as a keyword value chosen from the list below.

Display mode	Description	Fallback display mode
fullscreen	All of the available display area is used and no user agent chrome is shown.	standalone
standalone	The application will look and feel like a standalone application. This can include the application having a different window, its own icon in the application launcher, etc. In this mode, the user agent will exclude UI elements for controlling navigation, but can include other UI elements such as a status bar.	minimal-ui
minimal-ui	The application will look and feel like a standalone application, but will have a minimal set of UI elements for controlling navigation. The elements will vary by browser.	browser
browser	The application opens in a conventional browser tab or new window, depending on the browser and platform.	(none)

Examples

The CSS is used if the device is at fullscreen

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

Specifications

Specification	Status	Comment
Web App ManifestThe definition of 'display-mode' in that specification.	Working Draft	Initial definition.

Browser compatibility

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
display-mode media feature	Chrome Full support 45	Edge Full support 79	Firefox Full support 47 Notes' Full support 47 Notes' Notes' Firefox 47 and later support display-mode values fullscreen and browser. Firefox 57 added support for minimal-ui and standalone values.	IE No support No	Opera Full support 32	Safari Full support 13	WebView Android Full support 45	Chrome Android Full support 45	Firefox Android Full support 47 Notes' Full support 47 Notes' Notes' Firefox 47 and later support display-mode values fullscreen and browser. Firefox 57 added support for minimal-ui and standalone values.	Opera Android Full support 32	Safari iOS Full support 13	Samsung Internet Android Full support 5.0

Legend

Full support  

Full support

No support  

No support

See implementation notes.'

See implementation notes.

display-mode by Mozilla Contributors is licensed under CC-BY-SA 2.5.