How to detect the browser has moved to full screen

Question

TL; DR;

I can determine if the browser went in full screen mode through the full screen API, but I can not find that the browser went into full screen mode through f11 or in the browser menu (in particular, chrome).

Original:

I am currently using screenfull to go into full screen mode and detect that the browser is in full screen mode. The problem is that I don’t want to display the full screen toggle button when the browser goes to full screen through the browser function (i.e. f11 or full screen through the browser menu). This is because the javascript full-screen API does not seem to be able to detect that you are in full-screen mode or exit full-screen mode when you go through the browser function. I could just determine if f11 was hit, but it doesn’t work on the Mac or when full screen was launched through the browser menu.

Any ideas on how to determine if the full screen was launched using the browser function? I focus only on webgl-compatible browsers to reduce errors.

Answer 1

I have not tested this for reliability, but this is my approach.

//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 edges that are not in the full-screen api. Although I'm not sure if the screen.width vs. comparison window.innerWidth is a reliable way to check full screen. Maybe someone else can add / criticize this.

Answer 2

Use the fullscreenchange event to detect a full-screen change event, or if you do not want to handle provider prefixes, than you can also listen for the resize event (a window resize event that also fires when you enter full-screen mode or), and then check to see if document.fullscreenElement matters document.fullscreenElement is null to determine if fullscreen is enabled. You will need the prefix of the fullscreenElement provider 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 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"); } });