How to detect if user has enabled full screen in browser

Question

Is there some JavaScript event fired when user enables full screen in Chrome or FireFox?

I have WebGL application with canvas width and height set to a certain size and I would like to resize that among other things when user enables full screen. If there isn't such event, should I start researching ways to fill the browser window with canvas all though it complicates things while debugging?

Solution 1

You can compare the sreen width to the browser width, or height.

if (screen.width == window.innerWidth && screen.height == window.innerHeight) {
    //full web browser
}

EDIT : Be carefull in chrome if user have download manager, translate bar or element inspercter open the height is different to the sreen.

Solution 2

You can use document.mozFullScreen and document.webkitIsFullScreen as below:

if ((!document.mozFullScreen && !document.webkitIsFullScreen)) {
   //FullScreen is disabled
} else {
   //FullScreen is enabled
}

Solution 3

I have done the test on different browsers (IE9, Chrome, FireFox, Opera & Safari) this function works.

function chkfullscreen() {
    if (window.navigator.standalone || (document.fullScreenElement && document.fullScreenElement != =null) || (document.mozFullScreen || document.webkitIsFullScreen) || (!window.screenTop && !window.screenY))
        // full screen
        alert('full screen');
}

Solution 4

In 2019, eight years after the question was asked, MDN recommends using fscreen because browsers still don't support the fullscreen API in a consistent manner.

To detect if the browser has gone fullscreen, listen for the event fullscreenshange:

fscreen.addEventListener('fullscreenchange', handler, options);

To obtain the element that is currently in fullscreen, use fscreen.fullscreenElement.

A demo of fscreen shows that the fullscreen state can be detected.

Solution 5

I create new event, that fire, when browser goes fullscreen and back (via F11 or HTML5 Fullscreen API).

(function(){
    var ok = true;
    window.addEventListener('resize', function()
    {
        setTimeout(function () 
        {
            if (ok)
            {
                ok = false;
                setTimeout(function () { ok = true; }, 170);
                sendEvent(window.outerWidth === screen.width && window.outerHeight === screen.height);
            }
        }, 30);
    }, false);

    function sendEvent(fullscreen)
    {
        var event = new CustomEvent('fullscreenchange', { detail: fullscreen, bubbles: true, cancelable: true });

        if (document.fullscreenElement)
            document.fullscreenElement.dispatchEvent(event);
        else
           document.dispatchEvent(event);  
    }
})();

Using with JavaScript

document.addEventListener('fullscreenchange', fullscreenChanged, false);

function fullscreenChanged(event)
{
    console.log('Fullscreen: ' + event.detail);
}

or jQuery

$(document).on('fullscreenchange', function()
{
    console.log('Fullscreen: ' + event.detail);
});

View more solutions

Comments

[Zharktas]

That would work, but would require constant checking of changes in some interval function, which would be less than preferable compared to event handling.

[Yoann]

I made this script to view the dimention of mobile device. a check onresize event, check the onload first. frommelt.fr/dimension.html

[Yoann]

But be carefull in chrome if user have download manager, translate bar or element inspercter open the height is different to the sreen.

[ARF]

if (!window.screenTop && !window.screenY) does not work on some cases (if the browser window has no border and the user has the window maximized for example). You have to test on multiple OSs and window managers besides testing on multiple browsers.

[babyromeo]

thanks for point out the situation. i would suggest try this full screen test site pearce.org.nz/fullscreen

[tremby]

I'm getting a false for that when I am in fact in full screen. Chrome on OS X.

[skibulk]

Does this work if the user enters full screen mode and then loads the page afterwards? Or if they reload the current page?

[apaul]

@skibulk not sure, in my use case reloading the page automatically takes me out of full screen mode, but I was applying this to a video player.

[Endless]

@tremby did you enter fullscreen with the help of the browser or did you use javascript requestFullscreen api? Cuz this flag is only for detecting if a element has gone into fullscreen mode not the window itself

[tremby]

That might have been it. But I have no idea what I was working on two years ago so no way to say.