CSS 媒体功能 - display-mode

CSS 媒体功能 display-mode 用于根据 Web 应用程序的当前显示模式检测 Web 内容并设置其样式。它可用于维护统一的用户体验（即创建适应不同模式的样式），无论是从浏览器中的 URL 访问网站还是从桌面图标启动。

可能的值

媒体功能 display-mode 可以具有以下值：

fullscreen − 此值表示 Web 应用程序处于全屏模式。此模式通常会隐藏浏览器的用户界面元素，从而为 Web 应用程序提供更多屏幕空间。
standalone − 此值表示 Web 应用程序以独立模式运行，该模式通常用于已添加到主屏幕或作为独立应用程序打开的 Web 应用程序。它通常在没有浏览器的地址栏和导航控件的情况下显示。
minimal-ui − 此值表示 Web 应用程序处于最小 UI 模式，其中浏览器的用户界面部分隐藏，为 Web 应用程序内容提供更多空间。此模式不太常见，可能并非所有浏览器都支持此模式。
browser − 此值表示 Web 应用程序在默认浏览器模式下运行，在该模式下，它显示在具有所有控件和功能的常规 Web 浏览器界面中。
window-controls-overlay - 此值针对在用户桌面上的单独窗口中显示的应用程序，并打开了窗口控件覆盖功能。

语法


@media (display-mode: fullscreen|standalone|minimal-ui|browser|window-controls-overlay){
	 	//css style
}

CSS display-mode - fullscreen 值

以下示例演示了 display-mode： fullscreen 媒体功能用于在网页处于全屏模式时更改网页的布局 -

按 F11 键进入全屏模式。您将观察到背景颜色变为紫色，文本颜色变为白色。


<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
	 	body {
	 	 	 background-color: pink;
	 	 	 text-align: center;
	 	}
	 	h1 {
	 	 	 color: black;
	 	}
	 	@media (display-mode: fullscreen) {
	 	 	 body {
	 	 	 	 	background-color: violet;
	 	 	 	 	color: white;
	 	 	 }
	 	}
</style>
</head>
<body>
	 	<h1>CSS display-mode: fullscreen</h1>
	 	<p>To see the effect mode press F11 keyboard shortcuts windows fo fullscreen.</p>
</body>
</html>

CSS display-mode - standalone 值

以下示例演示了如何使用 display-mode - standalone 媒体功能在网页以独立模式显示时以不同的方式设置网页的样式 -

当您在独立模式下启动 Web 应用程序时，它会将背景颜色更改为紫色，并将文本颜色更改为白色。


<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
	 	body {
	 	 	 background-color: pink;
	 	 	 text-align: center;
	 	}
	 	h1 {
	 	 	 color: black;
	 	}
	 	@media (display-mode: standalone) {
	 	 	 body {
	 	 	 	 	background-color: violet;
	 	 	 	 	color: white;
	 	 	 }
	 	}
</style>
</head>
<body>
	 	<h1>CSS display-mode: standalone</h1>
	 	<p>To see the effect you need to launcheced the web application to home screen of the mobile.</p>
</body>
</html>

CSS display-mode - minimal-ui 值

以下示例演示了如何使用 display-mode： minimal-ui 媒体功能在网页以最小 UI 模式显示时以不同的方式设置网页的样式 -


<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
	 	body {
	 	 	 background-color: pink;
	 	 	 text-align: center;
	 	}
	 	h1 {
	 	 	 color: black;
	 	}
	 	@media (display-mode: minimal-ui) {
	 	 	 body {
	 	 	 	 	background-color: violet;
	 	 	 	 	color: white;
	 	 	 }
	 	}
</style>
</head>
<body>
	 	<h1>CSS display-mode: minimal-ui</h1>
	 	<p>To view the example in minimal UI mode, you can open the page in a PWA or in a mobile browser and then swipe down from the top of the screen to reveal the browser UI elements. Once the browser UI elements are revealed, tap on the "Hide UI" button to enter minimal UI mode.</p>
</body>
</html>

CSS display-mode - browser 值

以下示例演示了如何使用 display-mode： browser media 功能在浏览器中打开网页时更改网页的布局 -

当您在浏览器窗口中打开页面时，它会将背景颜色更改为紫色，并将文本颜色更改为蓝色。


<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
	 	body {
	 	 	 background-color: pink;
	 	 	 text-align: center;
	 	}
	 	h1 {
	 	 	 color: red;
	 	}
	 	@media (display-mode: browser) {
	 	 	 body {
	 	 	 	 	background-color: violet;
	 	 	 	 	color: blue;
	 	 	 }
	 	}
</style>
</head>
<body>
	 	<h1>CSS display-mode: browser</h1>
	 	<p>To view the example in a browser, you can open the HTML file in a web browser.</p>
</body>
</html>

CSS display-mode - window-controls-overlay 值

以下示例演示了如何使用 display-mode： window-controls-overlay 媒体功能将正文元素的背景颜色更改为紫色，将文本颜色更改为白色 -


<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
	 	body {
	 	 	 background-color: pink;
	 	 	 text-align: center;
	 	}
	 	h1 {
	 	 	 color: red;
	 	}
	 	@media (display-mode: window-controls-overlay) {
	 	 	 body {
	 	 	 	 	background-color: violet;
	 	 	 	 	color: white;
	 	 	 }
	 	}
</style>
</head>
<body>
	 	<h1>CSS display-mode: window-controls-overlay</h1>
	 	<p>To view the example in window controls overlay mode, install the PWA Builder extension and install the page as a PWA. Then, launch the PWA in a separate window and click the maximize button.</p>
</body>
</html>

打印本页