显示模式 | @media.display-mode (Media Queries) - CSS 中文开发手册
@media.display-mode
该display-mode CSS @media媒体功能可基于应用程序的显示模式的风格用于应用样式。您可以使用它来提供从URL启动网站和从桌面图标启动网站之间的一致的用户体验。
该功能对应于Web应用程序清单的display成员。两者都适用于顶级浏览上下文和任何子浏览上下文。无论是否存在Web应用程序清单，功能查询都适用。
语法
该display-mode功能被指定为从下面的列表中选择的关键字值。
| 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) |
例子
@media all and (display-mode: fullscreen) {
body {
margin: 0;
border: 5px solid black;
}
} 规范
| Specification | Status | Comment |
|---|---|---|
| Web App ManifestThe definition of 'display-mode' in that specification. | Working Draft | Initial definition. |
浏览器兼容性
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 46.01 | 47 (47)2 | ? | ? | ? |
| Feature | Android | Android Webview | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
|---|---|---|---|---|---|---|---|
| Basic support | ? | ? | 47 (47)2 | ? | ? | ? | 46.01 |