如何检测用户是否在浏览器中启用了全屏

Question

当用户在Chrome或FireFox中启用全屏时,是否会触发一些JavaScript事件？

我有WebGL应用程序,画布宽度和高度设置为一定的大小,我想在用户启用全屏时调整其他内容.如果没有这样的事件,我是否应该开始研究用canvas填充浏览器窗口的方法尽管它在调试时会使事情复杂化？

Answer 1

您可以将屏幕宽度与浏览器宽度或高度进行比较.

if (screen.width == window.innerWidth && screen.height == window.innerHeight) {
    //full web browser
}

编辑:如果用户有下载管理器,翻译栏或元素inspercter打开高度与sreen不同,请小心使用chrome.

Answer 2

您可以使用document.mozFullScreen和document.webkitIsFullScreen,如下所示:

if ((!document.mozFullScreen && !document.webkitIsFullScreen)) {
   //FullScreen is disabled
} else {
   //FullScreen is enabled
}