使用 Javascript 在浏览器中响应切换到全屏模式（又名“剧院模式”）答案

【问题标题】：Responding to a switch to full-screen mode (AKA "theater mode") in the browser, with Javascript使用 Javascript 在浏览器中响应切换到全屏模式（又名“剧院模式”）
【发布时间】：2012-02-02 21:54:49
【问题描述】：

在大多数浏览器上，按 F11 会将浏览器切换到没有工具栏和菜单的模式。当用户进入该模式时，我想对我的页面布局进行调整（特别是 - 有一个 DIV 应该覆盖整个客户区 - 如果用户 F11s - 那么添加到底部的额外空间被大div)。

我尝试使用 onkeydown 事件并响应 F11 键码 (122) - 但它在模式切换之前触发（在按下键之后） - 其中 documentElement 的 clientHeight 仍与以前一样。

我还尝试响应 document.onresize 和 document.documentElement.onresize 两者在 F11 时似乎都没有触发。

有什么想法吗？

【问题讨论】：

标签： javascript resize document fullscreen detect

【解决方案1】：

window.onresize 似乎适用于 FF3 和 IE8...

【讨论】：

【解决方案2】：

Chrome 15、Firefox 10 和 Safari 5.1 现在提供 API 以编程方式触发全屏模式。以这种方式触发的全屏模式提供了检测全屏更改的事件和用于设置全屏元素样式的 CSS 伪类。请注意，当用户按 F11 时，这些事件/伪类似乎并不适用。

详情请见this hacks.mozilla.org blog post。

【讨论】：