的问题：

Question

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

W3上的:fullscreen伪类有living specification

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

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

它抛出了这个错误：

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

的问题：

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

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

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

我们可以在没有浏览器嗅探的情况下完成吗？

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

阅读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

当您在浏览器中打开开发人员工具时，此方法也适用。由于将全屏模式应用于特定元素，因此null表示全屏都不存在。

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

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

仅当当前为全屏且（元素为null或element为全屏元素）时才返回true

Answer 4

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

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

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

还可以工作，以便随时以全屏模式进行任何单独的文档元素。

Answer 5

使用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有一个很好的例子，我在下面引用：

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

Answer 6

它在IE 8中工作，我正在为IE 8编写一个特定的网页。我不需要检查其他浏览器是否支持这个。

function isFullScreen(){
    return window.screenTop == 0 ? true : false;
}

Answer 7

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

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 8

试试这个！适用于最近的浏览器。

if (!window.screenTop && !window.screenY) {
    alert('Fullscreen mode......');
}

你也可以使用this jquery插件。

$(window).bind("fullscreen-on", function(e) {
alert("FULLSCREEN MODE");
});

Answer 9

var isFullScreen = function()
{
    var dom = document.createElement("img");
    if ("requestFullscreen" in dom
        || "requestFullScreen" in dom
        || "webkitRequestFullScreen" in dom
        || "mozRequestFullScreen" in dom){
        return !0;
    }
    return !1;
}

Answer 10

这是另一种可能适合您的解决方案：

function isFullScreen() {
return Math.abs(screen.width - window.innerWidth) < 10; 
}

我更喜欢使用宽度，因为它可以帮助解决底部的标签和开发人员信息。

Answer 11

您是否尝试过$（窗口）而不是$（文档）。请举例http://webification.com/tag/detect-fullscreen-jquery。

Answer 12

我找到了一个很好的方法：

w = $('body').width();

if (w == '4800' || w == '4320' || w == '4096' || w == '3200' || w == '3072' || w == '2880' || w == '2560' || w == '2400' || w == '2160' || w == '2048' || w == '1920' || w == '1800' || w == '1620' || w == '1600' || w == '1536' || w == '1440' || w == '1280' || w == '1200' || w == '1152' || w == '1080' || w == '1050' || w == '1024' || w == '960' || w == '900' || w == '864' || w == '800' || w == '768' || w == '720') {
      //User is fullscreen
}

然后将主体默认宽度设置为：

body { width: calc(100% - 1px) }

Answer 13

Modernizr FTW？试试这个要点。

Answer 14

这是IE 11中另一种解决方案：

$(document).bind('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', function() {
var isFullScreen = document.fullScreen ||
    document.mozFullScreen ||
    document.webkitIsFullScreen || (document.msFullscreenElement != null);
if (isFullScreen) {
    console.log('fullScreen!');
} else {
    console.log('no fullScreen!');
}

}）;

Answer 15

在iPhone的Safari中，如果webkitDisplayingFullscreen正在全屏播放，则true属性将返回<video>。参考：https://developer.apple.com/documentation/webkitjs/htmlvideoelement/1630493-webkitdisplayingfullscreen

Answer 16

建议的解决方案，使用：

return window.innerHeight == screen.height && window.innerWidth == screen.width;

可以正常工作，但前提是您不缩放浏览器。

要处理缩放屏幕的情况，请使用以下

：

let zoom = window.outerWidth / window.innerWidth;
return (window.innerHeight * zoom) == screen.height && (window.innerWidth * zoom) == screen.width;

确定缩放，然后将window.innerHeight和window.innerWidth相乘。

Answer 17

由于CSS可以可靠地检测全屏显示，因此您可以使用以下方式：

#detector {
    position: fixed;
    visibily: hidden;
    top: 0;
    left: 0;
}

@media all and (display-mode: fullscreen) {
    #detector {
        top: 1px;
    }
}

然后，您可以在javascript中设置一个间隔来检查元素的位置。 document.getElementById('detector').getBoundingClientRect().top > 0

您可以在反应时将全屏状态保持为变量或状态。

检测全屏模式

的问题：

17 个答案: