Detecting if a browser is in full screen mode

47
votes

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 by inspecting and comparing certain height/width measurements exposed by the DOM? Even if it only works for certain browsers I'm interested in hearing about it.

18
javascriptdombrowserfullscreen
Why do you need to detect this? Maybe there is another solution to your problem? – Marc
When the browser is in full screen mode there is no way of seeing the time reported by the operating system (e.g. in the clock in the taskbar notification area on Windows). Being able to see the current time can be important for users of our web application, so we'd like to be able to display a clock when the browser is full screened. Screen real estate is at a premium when our application is run at lower resolutions like 1024*768 so we'd like to only display the clock when the browser is full screened if at all possible. – Simon Lieschke
What if they don't normally have a clock on their desktop, and also don't use their browser full-screened? Are you sure you are the one responsible for them knowing the current time? – Roger Pate
Our desire to do this is based on customer feedback. – Simon Lieschke
I don't understand the third degree questioning of the motive here. There are a number of reasons why a web application (for instance) maybe should look/behave differently in F11 mode than in regular chrome. Focus on providing a solution rather than questioning intent. – Oskar Austegard

18 Answers

16
votes

Chrome 15, Firefox 10, and Safari 5.1 now provide APIs to programmatically trigger fullscreen mode. Fullscreen mode triggered this way provides events to detect fullscreen changes and CSS pseudo-classes for styling fullscreen elements.

See this hacks.mozilla.org blog post for details.

8
votes

What about determining the distance between the viewport width and the resolution width and likewise for height. If it is a small amount of pixels (especially for height) it may be at fullscreen.

However, this will never be reliable.

8
votes

Opera treats full screen as a different CSS media type. They call it Opera Show, and you can control it yourself easily:

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

Combined with Opera@USB, I've personally found it extremely handy.

5
votes

Firefox 3+ provides a non-standard property on the window object that reports whether the browser is in full screen mode or not: window.fullScreen.

5
votes

Just thought I'd add my thruppence to save anyone banging their heads. The first answer is excellent if you have complete control over the process, that is you initiate the fullscreen process in code. Useless should anyone do it thissen by hitting F11.

The glimmer of hope on the horizon come in the form of this W3C recommendation http://www.w3.org/TR/view-mode/ which will enable detection of windowed, floating (without chrome), maximized, minimized and fullscreen via media queries (which of course means window.matchMedia and associated).

I've seen signs that it's in the implementation process with -webkit and -moz prefixes but it doesn't appear to be in production yet.

So no, no solutions but hopefully I'll save someone doing a lot of running around before hitting the same wall.

PS *:-moz-full-screen does doo-dah as well, but nice to know about.

5
votes

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");              
          }
      });
4
votes

While searching high & low I have found only half-solutions. So it's better to post here a modern, working approach to this issue:

var isAtMaxWidth = (screen.availWidth - window.innerWidth) === 0;
var isAtMaxHeight = (screen.availHeight - window.outerHeight <= 1);
if (!isAtMaxWidth || !isAtMaxHeight) {
       alert("Browser NOT maximized!");
}

Tested and working properly in Chrome, Firefox, Edge and Opera* (*with Sidebar unpinned) as of 10.11.2019. Testing environment (only desktop):

CHROME - Ver. 78.0.3904.97 (64-bit)
FIREFOX - Ver. 70.0.1 (64-bit)
EDGE - Ver. 44.18362.449.0 (64-bit)
OPERA - Ver. 64.0.3417.92 (64-bit)
OS - WIN10 build 18362.449 (64-bit)

Resources:

3
votes

In Chrome at least:

onkeydown can be used to detect the F11 key being pressed to enter fullscreen. onkeyup can be used to detect the F11 key being pressed to exit fullscreen.

Use that in conjunction with checking for keyCode == 122

The tricky part would be to tell the keydown/keyup not to execute its code if the other one just did.

3
votes

Right. Totally late on this one...

As of 25th Nov, 2014 (Time of writing), it is possible for elements to request fullscreen access, and subsequently control entering/exiting fullscreen mode.

MDN Explanation here: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode

Straightforward explanation by David Walsh: http://davidwalsh.name/fullscreen

3
votes

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.

1
votes

This works for all new browsers :

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

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

1
votes

My solution is:

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);
1
votes

This is the solution that I've come to... I wrote it as an es6 module but the code should be pretty straightforward.

/**
 * 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;
0
votes

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
votes

To detect whether browser is in fullscreen mode:

document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement

according to caniuse you should be fine for majority of browsers.

0
votes

2021, the Fullscreen API is available. It's a Living Standard and is supported by all browsers (except the usual suspects - IE11 and iOS Safari).

// toggle fullscreen

      if (!document.fullscreenElement) {
        // enter fullscreen
        if (docElm.requestFullscreen) {
          console.log('entering fullscreen')
          docElm.requestFullscreen()
        }
      } else {
        // exit fullscreen
        if (document.exitFullscreen) {
          console.log('exiting fullscreen')
          document.exitFullscreen()
        }
      }