Detecting if a browser is in full screen mode

Question

Is there any way of reliably detecting if a browser is running in full screen mode? I\'m pretty sure there isn\'t any browser API I can query, but has anyone worked it out b

Answer 1

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

Answer 2

This is the solution that I've come to... I wrote it as an es6 module but the code should be pretty straightforward.

/**
 * Created by sam on 9/9/16.
 */
import $ from "jquery"

function isFullScreenWebkit(){
    return $("*:-webkit-full-screen").length > 0;
}
function isFullScreenMozilla(){
    return $("*:-moz-full-screen").length > 0;
}
function isFullScreenMicrosoft(){
    return $("*:-ms-fullscreen").length > 0;
}

function isFullScreen(){
    // Fastist way
    var result =
        document.fullscreenElement ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement ||
        document.msFullscreenElement;

    if(result) return true;

    // A fallback
    try{
        return isFullScreenMicrosoft();
    }catch(ex){}
    try{
        return isFullScreenMozilla();
    }catch(ex){}
    try{
        return isFullScreenWebkit();
    }catch(ex){}

    console.log("This browser is not supported, sorry!");
    return false;
}

window.isFullScreen = isFullScreen;

export default isFullScreen;

Answer 3

Firefox 3+ provides a non-standard property on the window object that reports whether the browser is in full screen mode or not: window.fullScreen.

Answer 4

Just thought I'd add my thruppence to save anyone banging their heads. The first answer is excellent if you have complete control over the process, that is you initiate the fullscreen process in code. Useless should anyone do it thissen by hitting F11.

The glimmer of hope on the horizon come in the form of this W3C recommendation http://www.w3.org/TR/view-mode/ which will enable detection of windowed, floating (without chrome), maximized, minimized and fullscreen via media queries (which of course means window.matchMedia and associated).

I've seen signs that it's in the implementation process with -webkit and -moz prefixes but it doesn't appear to be in production yet.

So no, no solutions but hopefully I'll save someone doing a lot of running around before hitting the same wall.

PS *:-moz-full-screen does doo-dah as well, but nice to know about.

Answer 5

My solution is:

var fullscreenCount = 0;
var changeHandler = function() {                                           

    fullscreenCount ++;

    if(fullscreenCount % 2 === 0)
    {
        console.log('fullscreen exit');
    }
    else
    {
        console.log('fullscreened');
    }

}                                                                         
document.addEventListener("fullscreenchange", changeHandler, false);      
document.addEventListener("webkitfullscreenchange", changeHandler, false);
document.addEventListener("mozfullscreenchange", changeHandler, false);
document.addEventListener("MSFullscreenChanges", changeHandler, false);

Answer 6

In Chrome at least:

onkeydown can be used to detect the F11 key being pressed to enter fullscreen. onkeyup can be used to detect the F11 key being pressed to exit fullscreen.

Use that in conjunction with checking for keyCode == 122

The tricky part would be to tell the keydown/keyup not to execute its code if the other one just did.