检测全屏模式

Question

IE 10 的现代桌面版始终是全屏的。

:fullscreen W3 上的伪类有一个动态 规范

但是当我尝试使用 jQuery 版本 1.9.x 和 2.x 检测全屏时：

 $(document).is(":fullscreen")

它抛出了这个错误：

语法错误，无法识别的表达式：全屏

问题：

1. 是因为 jQuery 还没有识别这个标准还是 IE10？

2. 检查全屏模式的 传统 方法是什么？我期待以下结果：

    function IsFullScreen() {
        /* Retrun TRUE */
        /* If UA exists in classic desktop and not in full screen  */
        /* Else return FALSE */
   }

1. 我们可以在没有浏览器嗅探的情况下做到吗？

原文由 Annie 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

正如您所发现的，浏览器兼容性是一个很大的缺点。毕竟，这是很新鲜的东西。

但是，由于您使用的是 JavaScript，因此与仅使用 CSS 相比，您有更多的选择。

例如：

 if( window.innerHeight == screen.height) {
    // browser is fullscreen
}

您还可以检查一些稍微宽松的比较：

 if( (screen.availHeight || screen.height-30) <= window.innerHeight) {
    // browser is almost certainly fullscreen
}

原文由 Niet the Dark Absol 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

当浏览器更改全屏模式时会触发一个事件。您可以使用它来设置一个变量值，您可以检查该值以确定浏览器是否全屏。

 this.fullScreenMode = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen; // This will return true or false depending on if it's full screen or not.

$(document).on ('mozfullscreenchange webkitfullscreenchange fullscreenchange',function(){
       this.fullScreenMode = !this.fullScreenMode;

      //-Check for full screen mode and do something..
      simulateFullScreen();
 });

var simulateFullScreen = function() {
     if(this.fullScreenMode) {
            docElm = document.documentElement
            if (docElm.requestFullscreen)
                docElm.requestFullscreen()
            else{
                if (docElm.mozRequestFullScreen)
                   docElm.mozRequestFullScreen()
                else{
                   if (docElm.webkitRequestFullScreen)
                     docElm.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT)
                }
            }
     }else{
             if (document.exitFullscreen)
                  document.exitFullscreen()
             else{
                  if (document.mozCancelFullScreen)
                     document.mozCancelFullScreen()
                  else{
                     if (document.webkitCancelFullScreen)
                         document.webkitCancelFullScreen();
                  }
             }
     }

     this.fullScreenMode= !this.fullScreenMode

}

原文由 anurag_29 发布，翻译遵循 CC BY-SA 3.0 许可协议