Detect fullscreen mode

Question

Modern desktop version of IE 10 is always fullscreen.

There is a living specification for :fullscreen pseudo-class on W3

But when I tried to det

Answer 1

As you have discovered, browser compatibility is a big drawback. After all, this is something very new.

However, since you're working in JavaScript, you have far more options available to you than if you were just using CSS.

For example:

if( window.innerHeight == screen.height) {
    // browser is fullscreen
}

You can also check for some slightly more loose comparisons:

if( (screen.availHeight || screen.height-30) <= window.innerHeight) {
    // browser is almost certainly fullscreen
}

Answer 2

an event is fired when the browser changes full screen mode. You can use that to set a variable value, which you can check to determine if the browser is full screen or not.

this.fullScreenMode = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen; // This will return true or false depending on if it's full screen or not.

$(document).on ('mozfullscreenchange webkitfullscreenchange fullscreenchange',function(){
       this.fullScreenMode = !this.fullScreenMode;

      //-Check for full screen mode and do something..
      simulateFullScreen();
 });





var simulateFullScreen = function() {
     if(this.fullScreenMode) {
            docElm = document.documentElement
            if (docElm.requestFullscreen) 
                docElm.requestFullscreen()
            else{
                if (docElm.mozRequestFullScreen) 
                   docElm.mozRequestFullScreen()
                else{
                   if (docElm.webkitRequestFullScreen)
                     docElm.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT)
                }
            }
     }else{
             if (document.exitFullscreen) 
                  document.exitFullscreen()
             else{ 
                  if (document.mozCancelFullScreen) 
                     document.mozCancelFullScreen()
                  else{
                     if (document.webkitCancelFullScreen) 
                         document.webkitCancelFullScreen();
                  }
             }
     }

     this.fullScreenMode= !this.fullScreenMode

}

Answer 3

Here is another solution which works in IE 11:

$(document).bind('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', function() {
var isFullScreen = document.fullScreen ||
    document.mozFullScreen ||
    document.webkitIsFullScreen || (document.msFullscreenElement != null);
if (isFullScreen) {
    console.log('fullScreen!');
} else {
    console.log('no fullScreen!');
}

});

Answer 4

As CSS is reliable in detecting the fullscreen, you can use something like this:

#detector {
    position: fixed;
    visibily: hidden;
    top: 0;
    left: 0;
}

@media all and (display-mode: fullscreen) {
    #detector {
        top: 1px;
    }
}

Then you set an interval in javascript to check the element's position. document.getElementById('detector').getBoundingClientRect().top > 0

You can maintain the fullscreen status in a variable or state if you are on react.

Answer 5

Proposed solution using:

return window.innerHeight == screen.height && window.innerWidth == screen.width;

works fine, but only in case you're not zooming your browser.

To handle cases with zoomed screen use following:

let zoom = window.outerWidth / window.innerWidth;
return (window.innerHeight * zoom) == screen.height && (window.innerWidth * zoom) == screen.width;

to detemine zoom and then multiply window.innerHeight and window.innerWidth.

Answer 6

This will work on IE9+ and other modern browsers

function isFullscreen(){ return 1 >= outerHeight - innerHeight };

Using "1" (instead of zero) because the system, at times, might just reserve a one pixel height for mouse interaction with some hidden or sliding command bars, in which case the fullscreen detection would fail.

• will also work for any separate document-element going on the full screen mode at any time.