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.
display-mode
feature is specified as a keyword value chosen from the list below.
| Display mode | 描述 | 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) |
@media all and (display-mode: fullscreen) {
body {
margin: 0;
border: 5px solid black;
}
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
Web App Manifest
The definition of 'display-mode' in that specification. |
工作草案 | 初始定义。 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
display-mode
media feature
|
Chrome 完整支持 45 | Edge 完整支持 79 |
Firefox
完整支持
47
注意事项
|
IE 不支持 No | Opera 完整支持 32 | Safari 完整支持 13 | WebView Android 完整支持 45 | Chrome Android 完整支持 45 |
Firefox Android
完整支持
47
注意事项
|
Opera Android 完整支持 32 | Safari iOS 完整支持 13 | Samsung Internet Android 完整支持 5.0 |
完整支持
不支持
见实现注意事项。