检测全屏模式

Question

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

有一种生活规范的:fullscreenW3上伪类

但是当我尝试使用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 */
   }
   

3. 没有浏览器嗅探我们能做到吗？

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
}

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

}

Answer 3

这适用于IE9 +和其他现代浏览器

function isFullscreen(){ return 1 >= outerHeight - innerHeight };

使用"1"(而不是零),因为系统有时可能只保留一个像素高度,用于鼠标与某些隐藏或滑动命令条的交互,在这种情况下,全屏检测将失败.

• 也适用于任何时候进入全屏模式的任何单独的文档元素.

Answer 4

阅读 MDN Web 文档，我喜欢这种原生方法。

https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/fullscreenElement

function is_fullscreen(){
    return document.fullscreenElement != null;
}

或发烧友

let is_fullscreen = () => !! document.fullscreenElement

当您在浏览器中打开开发人员工具时，此方法也适用。因为 fullscreen 应用于特定元素，所以 null 意味着它没有全屏显示。

您甚至可以扩展以检查特定元素，例如：

function is_fullscreen(element=null){
    return element != null? document.fullscreenElement == element:document.fullscreenElement != null;
}

如果当前是全屏并且（元素为空或元素是全屏元素），则仅返回true

Answer 5

更新 JS 变量：

window.matchMedia('(display-mode: fullscreen)').addEventListener('change', ({ matches }) => {
        if (matches) {
            window.isFullScreen=true;
        } else {
            window.isFullScreen=false;
        }
    });

Answer 6

这是最新的答案。与所有前缀的浏览器完全兼容：

function IsFullScreen() {
     return !!(document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement)
}

归功于https://developers.google.com/web/fundamentals/native-hardware/fullscreen/

演示版

function IsFullScreen() {
  console.log(!!(document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement))
}

<button onclick="IsFullScreen()">log fullscreen state</button>

Answer 7

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

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

https://msdn.microsoft.com/zh-cn/library/dn312066(v=vs.85).aspx对此有一个很好的示例，在下面引用：

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