Detecting if a browser is in full screen mode

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.

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.

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.

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:

• https://developer.mozilla.org/en-US/docs/Web/API/Screen/availWidth
• https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth
• https://developer.mozilla.org/en-US/docs/Web/API/Screen/availHeight
• https://developer.mozilla.org/en-US/docs/Web/API/Window/outerHeight

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

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()
        }
      }

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.

This property returns the Element that is currently in fullscreen mode.

document.fullscreenElement; // HTML Element or null

Also, you can subscribe to fullscreen change events with this method

addEventListener('fullscreenchange', (event) => { });

You can combine both to detect the nature of the change

addEventListener('fullscreenchange', () => { 
 if (document.fullscreenElement) {
   // Your Logic if fullscreen
 }
});

More on this here.