javascript - 检测全屏模式

Question

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

W3 上有伪类的生活规范:fullscreen

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

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

score 76 · Accepted Answer

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

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

例如：

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

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

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

score 15 · Accepted Answer

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

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

}

score 13 · Accepted Answer

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

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

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

也适用于任何时候在全屏模式下运行的任何单独的文档元素。

score 10 · Accepted Answer

使用fullscreenchangeevent 来检测全屏更改事件，或者如果您不想处理供应商前缀，那么您也可以监听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");              
          }
      });

score 9 · Accepted Answer

阅读 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 或元素为全屏元素）时才返回 true

score 4 · Accepted Answer

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

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>

score 3 · Accepted Answer

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

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

score 1 · Accepted Answer

这是另一个适用于 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!');
}

});

score 0 · Accepted Answer

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

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

你也可以使用这个jquery 插件。

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

score 0 · Accepted Answer

这是另一种可能对您有用的解决方案：

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

我更喜欢使用宽度，因为它有助于解决底部的选项卡和开发人员信息。

score 0 · Accepted Answer

您是否尝试过 $(window) 而不是 $(document)。按照一个示例http://webification.com/tag/detect-fullscreen-jquery。

score 0 · Accepted Answer

我想出了一个很好的方法：

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默认宽度设置为：

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

您可以订阅 window 对象上的 keydown 事件。如果用户按下F11或Ctrl++ (macOS)，则调用command以阻止浏览器全屏操作。相反，您可以调用方法或方法来更改全屏模式。这样，如果浏览器处于全屏模式，则将始终具有值。Fevent.preventDefault()requestFullscreenexitFullscreendocument.fullscreenElement

如果用户使用浏览器菜单进入全屏模式，此解决方法会中断。

score 0 · Accepted Answer

建议的解决方案使用：

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。

score 0 · Accepted Answer

更新 JS 变量：

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

score 0 · Accepted Answer

由于 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

如果您正在进行反应，您可以在变量或状态中保持全屏状态。

score -1 · Accepted Answer

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;
}

javascript - 检测全屏模式

问题：

18 回答 18

Related

Reference