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

大多数浏览器现在都能在一段时间内进入全屏模式或自助服务终端模式。从根本上说,浏览器的 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();

全屏模式下的内容会在浏览器视口中居中显示。开发者负责以最适合观看的方式设置内容的样式。通常情况下,您会希望 <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