javascript - 如何检测何时发生全屏事件(按 f11 键时)

Question

这个问题已经有答案了:

onfullscreenchange DOM event (6 个回答)

已关闭 9 年前。

如何在按下 f11 键时检测全屏事件何时发生。如果发生这种情况，则意味着屏幕处于全屏模式，然后显示警报。不使用键码比较。请给我一种不同的方法来执行此操作。

// mozilla proposal
element.requestFullScreen();
document.cancelFullScreen(); 

// Webkit (works in Safari and Chrome Canary)
element.webkitRequestFullScreen(); 
document.webkitCancelFullScreen(); 

// Firefox (works in nightly)
element.mozRequestFullScreen();
document.mozCancelFullScreen(); 

// W3C Proposal
element.requestFullscreen();
document.exitFullscreen();

或

element.addEventListener('fullscreeneventchange', function(e) {
    if (document.fullScreen) {
       /* make it look good for fullscreen */
    } else {
       /* return to the normal state in page */
    }
}, true);

Answer 1

window.onresize = function (event) {
    var maxHeight = window.screen.height,
        maxWidth = window.screen.width,
        curHeight = window.innerHeight,
        curWidth = window.innerWidth;

    if (maxWidth == curWidth && maxHeight == curHeight) {
        // do something
    }
}

或者，您也可以尝试 window.screen.availWidth 和 window.screen.availHeight (请注意，这些实际上可能不是屏幕分辨率，但可以考虑菜单栏/浏览器窗口尺寸的宽度等)