Detecting if a browser is in full screen mode

后端未结

关注

 17  1792

Is there any way of reliably detecting if a browser is running in full screen mode? I\'m pretty sure there isn\'t any browser API I can query, but has anyone worked it out b

相关标签:

17条回答

逝去的感伤

2020-11-27 06:46

There is my NOT cross-browser variant:

<!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>

Tested on:
Kubuntu 13.10:
Firefox 27 (<!DOCTYPE html> is required, script correctly works with dual-monitors), Chrome 33, Rekonq - pass

Win 7:
Firefox 27, Chrome 33, Opera 12, Opera 20, IE 10 - pass
IE < 10 - fail

0 讨论(0)

再見小時候

2020-11-27 06:47

You can check if document.fullscreenElement is not null to determine if fullscreen mode is on. You'll need to vendor prefix fullscreenElement accordingly. I would use something like this:

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

https://msdn.microsoft.com/en-us/library/dn312066(v=vs.85).aspx has a good example for this which I quote below:

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

0 讨论(0)

野性不改

2020-11-27 06:48
For Safari on iOS can use:
```
if (window.navigator.standalone) {
  alert("Full Screen");
}
```
More: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
0 讨论(0)
发布评论:

提交评论
- 加载中...
有刺的猬

2020-11-27 06:52
The Document read-only property returns the Element that is currently being presented in full-screen mode in this document, or null if full-screen mode is not currently in use.
```
if(document.fullscreenElement){
  console.log("Fullscreen");
}else{
  console.log("Not Fullscreen");
};
```
Supports in all major browsers.
0 讨论(0)
发布评论:

提交评论
- 加载中...

终归单人心

2020-11-27 06:54

User window.innerHeight and screen.availHeight. Also the widths.

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

0 讨论(0)

上一页 1 2 3