detect whether the screen is in a full screen

Question

I made a button to allow the screen to go to full screen and vice versa. However, there is also shortcut for user to go to full screen using the computer/laptop button F11.

<html>
<head>
<title>
Zoom
</title>
</head>
<body>
<script type="text/javascript">
//fullscreen();
function fullscreen() {
    var change = document.getElementById("fullscreen");
    if ((document.fullScreenElement && document.fullScreenElement !== null) ||
        (!document.mozFullScreen && !document.webkitIsFullScreen)) {
        if (document.documentElement.requestFullScreen) {
            document.documentElement.requestFullScreen();
        } else if (document.documentElement.mozRequestFullScreen) {
            document.documentElement.mozRequestFullScreen();
        } else if (document.documentElement.webkitRequestFullScreen) {
            document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
        }
        change.innerHTML = "click to go Normal Screen";
    } 
    else 
    {
        if (document.cancelFullScreen) {
            document.cancelFullScreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        }
        change.innerHTML = "click to go Full Screen";
    }
}

</script>
<button id="fullscreen" onclick="fullscreen()">Click to go Full Screen</button>
<h1>hi can u see me</h1>
<h2>hahahahah</h2>
<h3>blablablabla</h3>
<h4>heheheheh</h4>
</body>
</html>

Based on my code, by default, the screen is not in the full screen mode. If the user click the button, it will go to full screen mode and also the button label will change to view normal screen. But if the user click F11, it will go to fullscreen mode and I want the button to change to view normal mode. Please help me. thank you

Possible duplicate, although this question is a few years old: https://stackoverflow.com/questions/16755129/detect-fullscreen-mode — Nick, Oct 16 '17 at 00:55
When user presses F11 the page is not in fullscreen mode according to the Fullscreen Web API, the browser might be, according to the OS, but not the page per se. So both modes are not the same, and you can still request FS API's one, even when the user pressed F11. — Kaiido, Oct 16 '17 at 01:03

score 0 · Answer 1 · answered Oct 16 '17 at 00:56

In Firefox 3, window.fullScreen works (https://developer.mozilla.org/en/DOM/window.fullScreen).

if((window.fullScreen) ||
   (window.innerWidth == screen.width && window.innerHeight == screen.height)) {

} else {

}

score 0 · Answer 2 · answered Oct 16 '17 at 00:58

0

The trick with window.innerHeight works 95% of the cases.

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

For the 5% cases there were issues with floating elements on the page that caused window.innerHeight calculations go awry.

answered Oct 16 '17 at 00:58

nilobarp

3,806
2
29
37

I guess you meant `outerHeight`, because `innerHeight` won't work for F11 fullscreen mode. – Kaiido Oct 16 '17 at 01:05
I don't think this works for mobile devices. – soulseekah Jan 14 '22 at 17:26

detect whether the screen is in a full screen

2 Answers2