检测浏览器是否处于全屏模式

Question

有没有办法可靠地检测浏览器是否以全屏模式运行？我很确定没有任何浏览器API可以查询,但有没有人通过检查和比较DOM暴露的某些高度/宽度测量值来解决这个问题？即使它仅适用于某些浏览器,我也有兴趣听到它.

Answer 1

Chrome 15,Firefox 10和Safari 5.1现在提供API以编程方式触发全屏模式.以这种方式触发的全屏模式提供了检测全屏变化的事件和用于样式化全屏元素的CSS伪类.

有关详细信息,请参阅hacks.mozilla.org博客文章.

Answer 2

Opera将全屏视为不同的CSS媒体类型.他们称之为Opera Show,你可以轻松地自己控制它:

@media projection {
  /* these rules only apply in full screen mode */
}

结合Opera @ USB,我个人发现它非常方便.

Answer 3

如何确定视口宽度和分辨率宽度之间的距离,同样确定高度.如果它是少量像素(特别是高度),它可能是全屏的.

但是,这永远不可靠.

Answer 4

Document 只读属性返回当前在本文档中以全屏模式呈现的元素，如果当前未使用全屏模式，则返回 null。

if(document.fullscreenElement){
  console.log("Fullscreen");
}else{
  console.log("Not Fullscreen");
};

支持所有主流浏览器。

Answer 5

Firefox 3+ 为window报告浏览器是否处于全屏模式的对象提供了一个非标准属性：window.fullScreen。

Answer 6

只是想到我会加油,以挽救任何人敲打他们的头脑.如果您完全控制该过程,那么第一个答案非常好,即您在代码中启动全屏过程.没有人应该通过点击F11来做这件事.

W3C建议http://www.w3.org/TR/view-mode/将形成一线希望,它可以检测窗口,浮动(无铬),最大化,最小化和全屏媒体查询(当然这意味着window.matchMedia和相关联).

我已经看到了使用-webkit和-moz前缀在实现过程中的迹象,但它似乎还没有在生产中.

所以没有,没有解决方案,但希望我能拯救有人在撞到同一堵墙之前做了很多乱跑.

PS*: - moz-full-screen也有doo-dah,但很高兴知道.

Answer 7

您可以检查 if document.fullscreenElementis not null 以确定是否开启全屏模式。您需要相应地提供供应商前缀fullscreenElement。我会使用这样的东西：

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

https://msdn.microsoft.com/en-us/library/dn312066(v=vs.85).aspx有一个很好的例子，我在下面引用：

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