浏览器F11全屏不会注册-webkit-full-screen或Javascript API

Question

我使用javascript(例如requestFullscreen)和css(:-webkit-full-screen)API来全屏检测浏览器的状态.我没有这些API的问题,因为它们成功运作.

我遇到的问题是,如果用户点击F11,它不会在浏览器的环境中注册,并且用于全屏检测的javascript api和CSS api不会检测全屏.有什么方法可以解决这个问题吗？我有一些动画取决于屏幕的大小(关于全屏)我已经走到了死胡同.

Answer 1

您可以使用事件监听器fullscreenchange：

var isFullscreen = false;
document.addEventListener('fullscreenchange', function () {
    isFullscreen = !!document.fullscreen;
    yourFunction();
}, false);

document.addEventListener('mozfullscreenchange', function () {
    isFullscreen = !!document.mozFullScreen;
    yourFunction();
}, false);

document.addEventListener('webkitfullscreenchange', function () {
    isFullscreen = !!document.webkitIsFullScreen;
    yourFunction();
}, false);

function yourFunction() {
    if(isFullscreen) {
        $('.your-element').addClass('fullscreen');
        // ...
    } else {
        $('.your-element').removeClass('fullscreen');
        // ...
    }
}

文档：

• https://developer.mozilla.org/en-US/docs/Web/CSS/:全屏
• https://developer.mozilla.org/en-US/docs/Web/Reference/Events/fullscreenchange