让您的内容发挥最大作用 - Fullscreen API

Eric Bidelman

目前，大多数浏览器都已能够进入全屏或 kiosk 模式。基本上，浏览器的 Chrome 界面会退出，内容会接管。对于从 Chrome 应用商店安装的应用，用户甚至可以手动配置，使应用在从新标签页打开时全屏运行。手动全屏很好。程序化全屏广告效果更出色！

借助 Fullscreen API，Web 应用可以通过 JavaScript 以编程方式指示网页上的任何内容进入浏览器的全屏视图模式。这意味着，WebGL 和 <canvas> 游戏终于可以实现完全沉浸式体验，视频可以像在电影屏幕上观看一样，在线杂志可以像真实杂志一样。我喜欢这个浏览器，但我们不应受其限制 :)

如果您想跳过详细信息，请观看以下演示：

那么，该 API 是如何运作的？例如，如果您希望 <div> 进入全屏模式，只需告知它：

div.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
div.mozRequestFullScreen();
div.msRequestFullscreen();
div.requestFullscreen(); // standard

然后，如需退出全屏模式，document 会公开一个用于执行此操作的方法：

document.webkitExitFullscreen();
document.mozCancelFullScreen();
document.msExitFullscreen();
document.exitFullscreen();

注意：exitFullscreen() 是规范版本。不过，FF 和 WebKit 仍会公开带前缀的 cancelFullScreen()。

全屏模式下的内容会在浏览器视口中居中显示。开发者可以根据自己的需求，以最适合观看的方式设置内容样式。通常，您希望 <div> 占据整个屏幕空间。好消息是，该 API 包含用于此目的的新 CSS 伪选择器：

div:-webkit-full-screen {
    width: 100% !important;
}
div:-moz-full-screen {
    width: 100% !important;
}
div:-ms-fullscreen {
    width: 100% !important;
}
div:fullscreen {
    width: 100% !important;
}

/* While in fullscreen, hide any children with class 'tohide' */
:-webkit-full-screen .tohide {
    display: none;
}
:-moz-full-screen .tohide {
    display: none;
}
:-ms-fullscreen .tohide {
    display: none;
}
:fullscreen .tohide {
    display: none;
}

借助 CSS 伪选择器，您可以非常轻松地按照自己的意愿设置全屏内容的样式。

在 Chrome 15、FF 14、IE 11 和 Opera 12.1 中，Fullscreen API 默认处于启用状态。如需详细了解 API 的其余部分，请参阅规范。

更新时间：2012 年 10 月 11 日：以符合规范变更。将 requestFullscreen() 中的“S”更改为小写，并将 document.webkitCancelFullScreen() 更改为 document.webkitExitFullscreen()。更新了浏览器兼容性备注。

更新时间：2014 年 2 月 11 日：添加了 IE 的缩写，添加了标准 CSS 语法，并更新了浏览器兼容性注释。谢谢 @dstorey 和 @patrickkettner。