显示模式 | @media.display-mode (Media Queries) - CSS 中文开发手册 - Break易站

  CSS 中文开发手册

显示模式 | @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

  CSS 中文开发手册

  本文标题：显示模式 | @media.display-mode (Media Queries) – CSS 中文开发手册 - Break易站

转载请保留页面地址：https://www.breakyizhan.com/css/32035.html