全屏 | :fullscreen

*全屏

这是一种实验技术

由于该技术的规格不稳定,请查看兼容性表以了解各种浏览器的使用情况。还请注意,随着规范的变化,实验技术的语法和行为在未来版本的浏览器中可能会发生变化。

:fullscreenCSS伪类选择显示在浏览器全屏模式下的任何元件。

/* Selects any <div> as long as it is being displayed in fullscreen mode */ /* Implemented in Gecko, Edge/IE, and WebKit/Chrome using prefixes */ /* Edge also supports the non-prefixed version */ div:-webkit-full-screen { background-color: pink; } div:-moz-full-screen { background-color: pink; } div:-ms-fullscreen { background-color: pink; } div:fullscreen { background-color: pink; }

注意:W3C规范使用单个单词:fullscreen, 没有破折号 ,但Webkit和Gecko实验实现都使用带有两个单词的前缀变体,分别用短划线:-webkit-full-screen:-moz-full-screen。Microsoft Edge和Internet Explorer分别使用标准约定:fullscreen:-ms-fullscreen

语法

:fullscreen

HTML

<div id="fullscreen">   <h1>:fullscreen Demo</h1>   <p> This will become big red text when the browser is in fullscreen mode.</p>   <button id="fullscreen-button">Enter Fullscreen</button> </div>

CSS

#fullscreen:fullscreen { padding: 42px; background-color: pink; border:2px solid #f00; font-size: 200%; } #fullscreen:fullscreen > h1 { color: red; } #fullscreen:fullscreen > p { color: DarkRed; } #fullscreen:fullscreen > button { display: none; }

结果

(如果'进入全屏'按钮不起作用,请点击此处)

规范

SpecificationStatusComment
Fullscreen APIThe definition of ':fullscreen' in that specification.Living StandardInitial definition

浏览器兼容性

FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support15.0 -webkit1129.0 (9.0)-moz1 47.0 (47.0)211 -ms3?6.0 -webkit1
Select all elements in the fullscreen stack?1243 (43)11??

FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support?(Yes)9.0 (9.0) 47.0 (47.0)2No supportNo supportNo support
Select all elements in the fullscreen stack?(Yes)43.0 (43)???