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

Question

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

我有一个使用WebGL的应用程序，其中canvas的宽度和高度设置为一定的大小，当用户启用全屏时，我想调整其大小，以及其他一些事情。如果没有这样的事件，那么我应该开始研究如何将浏览器窗口填充到canvas中，尽管这会在调试时使事情变得复杂。

- Zharktas

Answer 1

你可以将屏幕宽度与浏览器的宽度或高度进行比较。

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

编辑：在 Chrome 中要小心，如果用户有下载管理器，翻译栏或元素检查器打开，则高度与屏幕不同。

- Yoann

---

这个方法可能可行，但需要不断检查一些间隔函数中的更改，与事件处理相比，这种方法不是最佳选择。 - Zharktas

我编写了这个脚本来查看移动设备的尺寸。在检查onresize事件之前，请先检查onload。http://frommelt.fr/dimension.html - Yoann

但是在Chrome中要小心，如果用户有下载管理器、翻译栏或元素检查器打开，则高度与屏幕不同。 - Yoann

Answer 2

您可以按照以下方式使用document.mozFullScreen和document.webkitIsFullScreen：

您可以使用document.mozFullScreen和document.webkitIsFullScreen来判断全屏模式。

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

- PBN

---

我在全屏模式下，但是Chrome在OS X上显示为假。 - tremby

@tremby，你是通过浏览器还是使用JavaScript的requestFullscreen API进入全屏模式的？因为这个标志只用于检测元素是否进入了全屏模式，而不是窗口本身。 - Endless

可能就是这样了。但我不知道两年前我在做什么，所以无法确定。 - tremby

Answer 3

我已经在不同的浏览器上进行了测试（IE9，Chrome，FireFox，Opera和Safari），这个功能可以正常使用。

function chkfullscreen() {
    if (window.navigator.standalone || (document.fullScreenElement && document.fullScreenElement != =null) || (document.mozFullScreen || document.webkitIsFullScreen) || (!window.screenTop && !window.screenY))
        // full screen
        alert('full screen');
}

- babyromeo

---

如果 (!window.screenTop && !window.screenY) 在某些情况下无法工作（例如，如果浏览器窗口没有边框，并且用户将窗口最大化）。您必须在多个操作系统和窗口管理器上进行测试，除了在多个浏览器上进行测试。 - Hoffmann

感谢指出这种情况。我建议尝试这个全屏测试网站http://pearce.org.nz/fullscreen/。 - babyromeo

Answer 4

我创建了一个新事件，当浏览器进入全屏模式并退出（通过F11或HTML5全屏API）时触发。

(function(){
    var ok = true;
    window.addEventListener('resize', function()
    {
        setTimeout(function () 
        {
            if (ok)
            {
                ok = false;
                setTimeout(function () { ok = true; }, 170);
                sendEvent(window.outerWidth === screen.width && window.outerHeight === screen.height);
            }
        }, 30);
    }, false);

    function sendEvent(fullscreen)
    {
        var event = new CustomEvent('fullscreenchange', { detail: fullscreen, bubbles: true, cancelable: true });

        if (document.fullscreenElement)
            document.fullscreenElement.dispatchEvent(event);
        else
           document.dispatchEvent(event);  
    }
})();

使用 JavaScript

document.addEventListener('fullscreenchange', fullscreenChanged, false);

function fullscreenChanged(event)
{
    console.log('Fullscreen: ' + event.detail);
}

或者 jQuery

$(document).on('fullscreenchange', function()
{
    console.log('Fullscreen: ' + event.detail);
});

- Matěj Pokorný

Answer 5

2019年，即使问题被提出八年后，MDN仍然推荐使用fscreen，因为浏览器对全屏API的支持仍不一致。

要检测浏览器是否已进入全屏模式，请监听事件fullscreenshange:

fscreen.addEventListener('fullscreenchange', handler, options);

要获取当前全屏显示的元素，请使用fscreen.fullscreenElement。

fscreen的演示显示可以检测到全屏状态。

注释：fullscreenElement是指当前在全屏模式下正在显示的元素对象。fscreen是一个Javascript库，用于全屏API的跨浏览器封装。

- Matthew Walker

Answer 6

经过长时间的搜索和沮丧，我发现这是最好的方法：

function isFullScreen() {
    // do stuff for full screen
}

function notFullScreen() {
    // do stuff for non-full screen
}
document.addEventListener("fullscreenchange", function () {
    (document.fullscreen) ? isFullScreen() : notFullScreen();
}, false);

document.addEventListener("mozfullscreenchange", function () {
    (document.mozFullScreen) ? isFullScreen() : notFullScreen();
}, false);

document.addEventListener("webkitfullscreenchange", function () {
    (document.webkitIsFullScreen) ? isFullScreen() : notFullScreen();
}, false);

或者，如果您不喜欢使用三元运算符：

function isFullScreen() {
    // do stuff for full screen
}

function notFullScreen() {
    // do stuff for non-full screen
}
document.addEventListener("fullscreenchange", function () {
    if (document.fullscreen) {
        isFullScreen();
    } else {
        notFullScreen();
    }
}, false);

document.addEventListener("mozfullscreenchange", function () {
    if (document.mozFullScreen) {
        isFullScreen();
    } else {
        notFullScreen();
    }
}, false);

document.addEventListener("webkitfullscreenchange", function () {
    if (document.webkitIsFullScreen) {
        isFullScreen();
    } else {
        notFullScreen();
    }
}, false);

- apaul

---

如果用户进入全屏模式，然后再加载页面，这个能正常工作吗？或者如果他们重新加载当前页面呢？ - skibulk

@skibulk 不确定，在我的使用情况中，自动重新加载页面会使我退出全屏模式，但我是应用在一个视频播放器上的。 - apaul