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

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

---

我有一个WebGL应用程序，画布的宽度和高度设置为一定的大小，我想在用户启用全屏时调整大小。如果没有这样的事件，我是否应该开始研究用画布填充浏览器窗口的方法，尽管这会使调试过程变得复杂

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

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

---

编辑：如果用户已打开下载管理器、翻译栏或元素浏览器，请小心使用chrome。高度与屏幕不同。

您可以使用document.mozFullScreen和document.webkitIsFullScreen，如下所示：

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

---

我已经在不同的浏览器（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');
}

---

我创建了一个新的事件，当浏览器全屏返回（通过F11或HTML5全屏API）时触发

与JavaScript一起使用

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

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

或jQuery

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

---

经过多次探索和挫折，这是我找到的最好的方法：

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);

---

2019年，在这个问题提出八年后，MDN使用了，因为浏览器仍然不以一致的方式支持全屏API

要检测浏览器是否已全屏显示，请收听事件

fullscreenshange

：

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

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

fscreen.fullscreenElement

---

A显示可以检测到全屏状态。

这会起作用，但需要不断检查某些间隔函数的变化，这与事件处理相比不太可取。我编写此脚本是为了查看移动设备的尺寸。检查

onresize

事件，首先检查

onload

。但是，如果用户有下载管理器、翻译栏或element inspercter open，请小心使用chrome。如果（！window.screenTop&&！window.screenY）在某些情况下不起作用（例如，如果浏览器窗口没有边框，用户使窗口最大化）。除了在多个浏览器上进行测试外，您还必须在多个操作系统和窗口管理器上进行测试。感谢您指出这种情况。我建议你试试这个全屏测试网站，当我在全屏上的时候，我得到了一个错误的答案。Chrome on OS X.@tremby您是在浏览器的帮助下进入全屏，还是使用了javascript请求全屏api？因为此标志仅用于检测元素是否进入全屏模式，而不是检测可能已进入全屏模式的窗口本身。但我不知道两年前我在做什么，所以也无从得知。如果用户进入全屏模式，然后加载页面，这是否有效？或者他们是否重新加载当前页面？@skibulk不确定，在我的用例中，重新加载页面会自动使我脱离全屏模式，但我将此应用于视频播放器。

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