检测如果浏览器是在全屏模式下检测如果浏览器是在全屏模式下(Detecting if a browse

2019-05-13 21:15发布

站内文章 / 移动开发

19 0

女痞

女 | 书童

私信

是否存在，如果浏览器在全屏模式下运行可靠地检测什么办法？我敢肯定没有任何浏览器API我可以查询，但有没有人算出来通过检查和比较由DOM暴露一定的高度/宽度测量？即使它仅适用于特定的浏览器，我有兴趣了解它。

Answer 1:

铬15，火狐10和Safari 5.1现在提供API，以编程方式触发全屏模式。全屏模式触发这种方式提供的事件来检测全屏造型元素全屏变化和CSS伪类。

见这hacks.mozilla.org博客文章的详细信息。

Answer 2:

歌剧把全屏幕为不同的CSS媒体类型。他们称之为歌剧显示，你可以很容易自己控制它：

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

联合歌剧@ USB ，我个人觉得非常方便。

Answer 3:

什么有关确定视口宽度和分辨率宽度之间，同样也高度的距离。如果是像素的少量（尤其是高度），可能在全屏模式。

然而，这绝不会是可靠的。

Answer 4:

只是想我要补充我thruppence拯救任何人敲打他们的头。第一个答案是优秀的，如果你有对过程的完全控制，那是你启动全屏程序代码。没用的人应该做的THISSEN通过按F11。

希望的地平线上的一线希望来到这个W3C推荐的形式http://www.w3.org/TR/view-mode/这将使窗口的检测，浮动（无铬），最大化，最小化，并通过全屏媒体查询（这当然意味着window.matchMedia和相关联）。

我已经看到迹象表明它在与-webkit和-moz前缀的实现过程，但它不会出现在生产呢。

因此，没有，没有解决方案，但希望我会救一个人做了很多打同一墙前跑来跑去的。

PS *： - MOZ全屏做斗大新为好，但好的了解。

Answer 5:

火狐3 +提供了一个非标准的属性window ，报告的浏览器是否在全屏模式下或没有对象： window.fullScreen 。

Answer 6:

在Chrome中至少包括：

onkeydown可以被用来检测F11键被按下，进入全屏模式。 onkeyup可用于检测F11键被按下退出全屏。

使用连同检查keyCode == 122

最棘手的部分是要告诉的keydown /如果对方一个只是做KEYUP不执行其代码。

Answer 7:

对于Safari浏览器在iOS上可以使用：

if (window.navigator.standalone) {
  alert("Full Screen");
}

更多： https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

Answer 8:

这适用于所有新的浏览器：

if (!window.screenTop && !window.screenY) { 
   alert('Browser is in fullscreen');
}

Answer 9:

对。共后期在这一个...

如2014年11月25日（写入时间）的，它是可能的元件，以请求访问全屏，并随后控制进/出全屏模式。

MDN说明这里： https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode

大卫·沃尔什明了的解释： http://davidwalsh.name/fullscreen

Answer 10:

您可以检查是否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 11:

还有就是我不跨浏览器的变体：

<!DOCTYPE html>
<html>
<head>
  <title>Fullscreen</title>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
var fullscreen = $(window).height() + 1 >= screen.height;
$(window).on('resize', function() {
  if (!fullscreen) {
    setTimeout(function(heightStamp) {
      if (!fullscreen && $(window).height() === heightStamp && heightStamp + 1 >= screen.height) {
        fullscreen = true;
        $('body').prepend( "<div>" + $( window ).height() + " | " + screen.height + " | fullscreen ON</div>" );
      }
    }, 500, $(window).height());
  } else {
    setTimeout(function(heightStamp) {
      if (fullscreen && $(window).height() === heightStamp && heightStamp + 1 < screen.height) {
        fullscreen = false;
        $('body').prepend( "<div>" + $( window ).height() + " | " + screen.height + " | fullscreen OFF</div>" );
      }
    }, 500, $(window).height());
  }
});
</script>
</body>
</html>

测试在：
Kubuntu的13.10：
（火狐27 <!DOCTYPE html>是必需的，脚本正确地与双显示器作品），铬33，Rekonq -通

Win 7的 ：
火狐27，铬33，歌剧12，歌剧20，IE 10 - 通
IE <10 - 失败

Answer 12:

我的解决办法是：

var fullscreenCount = 0;
var changeHandler = function() {                                           

    fullscreenCount ++;

    if(fullscreenCount % 2 === 0)
    {
        console.log('fullscreen exit');
    }
    else
    {
        console.log('fullscreened');
    }

}                                                                         
document.addEventListener("fullscreenchange", changeHandler, false);      
document.addEventListener("webkitfullscreenchange", changeHandler, false);
document.addEventListener("mozfullscreenchange", changeHandler, false);
document.addEventListener("MSFullscreenChanges", changeHandler, false);

Answer 13:

这是我来......我写它作为一个ES6模块，但代码应该是非常简单的解决方案。

/**
 * Created by sam on 9/9/16.
 */
import $ from "jquery"

function isFullScreenWebkit(){
    return $("*:-webkit-full-screen").length > 0;
}
function isFullScreenMozilla(){
    return $("*:-moz-full-screen").length > 0;
}
function isFullScreenMicrosoft(){
    return $("*:-ms-fullscreen").length > 0;
}

function isFullScreen(){
    // Fastist way
    var result =
        document.fullscreenElement ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement ||
        document.msFullscreenElement;

    if(result) return true;

    // A fallback
    try{
        return isFullScreenMicrosoft();
    }catch(ex){}
    try{
        return isFullScreenMozilla();
    }catch(ex){}
    try{
        return isFullScreenWebkit();
    }catch(ex){}

    console.log("This browser is not supported, sorry!");
    return false;
}

window.isFullScreen = isFullScreen;

export default isFullScreen;

Answer 14:

用户window.innerHeight和screen.availHeight 。此外宽度。

window.onresize = function(event) {
    if (window.outerWidth === screen.availWidth && window.outerHeight === screen.availHeight) {
        console.log("This is your MOMENT of fullscreen: " + Date());    
}

文章来源: Detecting if a browser is in full screen mode