How to detect browser has gone to full screen

Question

TLDR;

I can detect if the browser has gone to full screen through the full screen API but I cannot detect that the browser has gone to full screen through f11 or the browser menu (specifically chrome).

Original:

Currently I am using screenfull to go to full screen and detect that the browser is in full screen. The problem is that I do not want to display my full screen toggle button when the browser has gone to full screen through a browser function (i.e. f11 or full screen through the browser menus). This is because the javascript full screen API does not seem to be able to detect that you are in full screen or get you out of full screen when you have gone there through a browser function. I could just detect if f11 was hit, but this doesn't work on mac or when full screen has been initiated through the browser menus.

Any ideas on how to detect if full screen was initiated through a browser function? I'm only targeting webgl compatible browsers so that cuts down on a lot of gotchas.

Answer 1

I haven't tested this for reliability but this is my take.

  //without jQuery
window.addEventListener('resize', function(){
  if(screen.width === window.innerWidth){
   // this is full screen
  }
});


  //with jQuery
$(document).ready(function() {
  $(window).on('resize', function(){
    if(screen.width === window.innerWidth){
      // this is full screen
    }
  });
});

This seems to work when pressing the F11 button and other methods, so it should catch the edge cases that the full screen api does not. Although I'm not sure the comparison of screen.width vs. window.innerWidth is a reliable way to check for full screen. Maybe someone else can add to/critique this.

Answer 2

Use fullscreenchange event to detect a fullscreen change event, or if you don't want to handle vendor prefixes than you can also listen to the resize event (the window resize event that also triggers when fullscreen is entered or exited) and then 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. They have used the fullscreenChange event, but you could listen for the "resize" event

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

Answer 3

After trying a lot of approaches across different browsers and devices, the following solution worked for me reliably.

 window.addEventListener("resize", () => {
        setTimeout(() => {
            const windowWidth = window.innerWidth * window.devicePixelRatio;
            const windowHeight = window.innerHeight * window.devicePixelRatio;
            const screenWidth = window.screen.width;
            const screenHeight = window.screen.height;
            console.log(windowWidth/screenWidth);
            console.log(windowHeight/screenHeight);
            if (((windowWidth/screenWidth)>=0.95) && ((windowHeight/screenHeight)>=0.95)) {
                console.log("Fullscreen");
            }
            else {
                console.log("Not Fullscreen");
            }
        }, 100);
    })