如何检测浏览器是否进入全屏模式

Question

简单来说，我可以通过全屏API检测浏览器是否已经进入全屏模式，但是我无法检测浏览器是否通过F11或浏览器菜单（特别是Chrome）进入了全屏模式。

目前我正在使用screenfull使浏览器进入全屏并检测浏览器是否处于全屏状态。问题在于，当浏览器通过浏览器功能（例如F11或浏览器菜单）进入全屏时，我不想显示我的全屏切换按钮。这是因为JavaScript全屏API似乎不能检测您是否处于全屏状态或在您通过浏览器功能进入全屏时将您退出全屏状态。我可以检测是否按下了F11，但这在mac上不起作用，也不适用于通过浏览器菜单启动全屏的情况。

有没有想法如何检测是否通过浏览器功能启动了全屏？我只针对支持WebGL的浏览器，这样就避免了很多问题。

- Braden

---

可能是检测浏览器是否处于全屏模式的重复问题。 - thanksd

https://dev59.com/XlbTa4cB1Zd3GeqP7hco - mike.zimin

我可以通过全屏API检测浏览器是否已进入全屏模式，但我无法检测浏览器是否通过F11或工具栏菜单进入了全屏模式。 - Braden

我不知道它有多可靠，但是检查screen.width和window.innerWidth是否具有相同的值可能有所帮助。例如，在调整大小事件之后检查这些值。 - Antonio Manente

我和@AntonioManente想到了同样的事情，比较屏幕大小和浏览器窗口大小，你就会知道它是否全屏。你可以在这里尝试：http://whatsmy.browsersize.com/ - Shanoor

可能是重复的问题：如何检测用户是否在浏览器中启用了全屏模式。 - Suma

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 vs.window.innerWidth是否是检查全屏可靠的方法。也许有人可以补充/批评这一点。

- Antonio Manente

---

仅比较宽度是不够的，当窗口最大化时两者相同。您还需要比较高度，但有趣的是从这里开始。在全屏Chromium中，屏幕高度和窗口高度相同，在IE中，由于状态栏的存在，情况并非如此。我没有在Firefox中尝试过，但可以通过扩展添加状态栏。在全屏模式下，窗口高度应该比屏幕大小小x%。 - Shanoor

@ShanShan 我理解你的观点，但我有一个问题。OP正在寻找通过按下“F11”或浏览器功能实现全屏的边缘情况。如果我没记错的话，这种方式进入全屏时不是状态栏会被压缩吗？ - Antonio Manente

IE总是会在全屏模式下显示状态栏（我几分钟前试过），除非你完全禁用它。我也在Firefox中试过，但有一个像素的差异。不管怎样这个解决方案是一个很好的起点，只需要一些微调和测试。 - Shanoor

这似乎有效。但奇怪的是，您不能将Chrome开发工具停靠在窗口上，否则它会减去该窗口的大小。 - Braden

当控制台打开时，此解决方案会失败。 - user1000456

Answer 2

使用fullscreenchange事件来检测全屏更改事件，或者如果您不想处理厂商前缀，那么您也可以监听resize事件（窗口调整大小事件，在进入或退出全屏时也会触发），然后检查document.fullscreenElement是否不为空来确定是否打开了全屏模式。您需要相应地添加厂商前缀fullscreenElement。我会使用类似这样的代码：

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

https://msdn.microsoft.com/zh-cn/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");              
          }
      });

- Parth

---

这实际上是行不通的，因为“fullscreenChange”事件仅在调用HTML5全屏JavaScript API时触发。如果用户按下F11键，则该事件不会触发，“document.fullscreenElement”（以及供应商前缀版本）仍然为null。 - Kevin Ji

我得到的是 document.fullscreenElement === undefined。 - Akin Hwan

Answer 3

在不同的浏览器和设备上尝试了很多方法后，以下解决方案对我来说非常可靠。

 window.addEventListener("resize", () => {
        setTimeout(() => {
            const windowWidth = window.innerWidth * window.devicePixelRatio;
            const windowHeight = window.innerHeight * window.devicePixelRatio;
            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);
    })

- Aruldd

---

为确保捕捉到已缩放的用户，请确保在混合中包含window.devicePixelRatio。应更改以下变量： const windowWidth = window.innerWidth * window.devicePixelRatio; const windowHeight = window.innerHeight * window.devicePixelRatio; - duckboy81