Question

TLDR;

我可以通过全屏API检测浏览器是否已全屏显示，但我无法通过f11或浏览器菜单（特别是chrome）检测到浏览器已全屏显示。

原件：

目前我正在使用screenfull进入全屏并检测到浏览器处于全屏状态。问题是当浏览器通过浏览器功能（即f11或通过浏览器菜单全屏）进入全屏时，我不想显示我的全屏切换按钮。这是因为当您通过浏览器功能访问时，javascript全屏API似乎无法检测到您是全屏幕还是让您无法全屏显示。我可以检测f11是否被击中，但这不适用于Mac或通过浏览器菜单启动全屏时。

有关如何检测是否通过浏览器功能启动全屏的任何想法？我只针对兼容webgl的浏览器，因此可以减少很多陷阱。

Answer 1

我还没有对此进行可靠性测试，但这是我的看法。

  //without jQuery
window.addEventListener('resize', function(){
  if(screen.width === window.innerWidth){
   // this is full screen
  }
});


  //with jQuery
$(document).ready(function() {
  $(window).on('resize', function(){
    if(screen.width === window.innerWidth){
      // this is full screen
    }
  });
});

当按下F11按钮和其他方法时，这似乎有效，所以它应该捕捉全屏api没有的边缘情况。虽然我不确定 screen.width与window.innerWidth 的比较是检查全屏的可靠方法。也许其他人可以添加/批评这个。

Answer 2

使用fullscreenchange事件来检测全屏更改事件，或者如果您不想处理供应商前缀，则还可以侦听resize事件（窗口调整大小事件也会触发时）输入或退出全屏）然后检查document.fullscreenElement是否为空以确定是否启用了全屏模式。您需要相应地提供商前缀fullscreenElement。我会用这样的东西：

var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement ||
document.webkitFullscreenElement || document.msFullscreenElement;

https://msdn.microsoft.com/en-us/library/dn312066(v=vs.85).aspx有一个很好的例子，我在下面引用它。他们使用了fullscreenChange事件，但您可以收听"resize"事件

document.addEventListener("fullscreenChange", function () {
          if (fullscreenElement != null) {
              console.info("Went full screen");
          } else {
              console.info("Exited full screen");              
          }
      });

Answer 3

在不同的浏览器和设备上尝试了许多方法之后。这是对我可靠的解决方案。

 window.addEventListener("resize", () => {
        setTimeout(() => {
            const windowWidth = window.innerWidth;
            const windowHeight = window.innerHeight;
            const screenWidth = window.screen.width;
            const screenHeight = window.screen.height;
            console.log(windowWidth/screenWidth);
            console.log(windowHeight/screenHeight);
            if (((windowWidth/screenWidth)>=0.95) && ((windowHeight/screenHeight)>=0.95)) {
                console.log("Fullscreen");
            }
            else {
                console.log("Not Fullscreen");
            }
        }, 100);
    })

如何检测浏览器已全屏显示

3 个答案: