CSS参考手册
媒体查询 | Media Queries
显示模式 | @media.display-mode
@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 |
媒体查询 | Media Queries相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。