display-mode - CSS: Cascading Style Sheets 编辑
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 Manifest The definition of 'display-mode' in that specification. | Working Draft | Initial definition. |
Browser compatibility
BCD tables only load in the browser
See also
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论