Detect Firefox Fullscreen

[tinfanide]

I want to detect if Firefox is in fullscreen mode.Is there a way to do so in JS?

[ShadowMage]

This is just a guess, but I'm going to say no. That's related to browser behavior which cannot be affected.

[justsomeguy]

You may be able to compare the total screen size with the document size and check how close they are.

[tinfanide]

How can it be done?Should I use

screen.availWidth

to detect the total screen size?

[Ingolme]

It's in the W3Schools reference: http://w3schools.com/jsref/obj_screen.asp availWidth contains the width of the screen excluding the task bar, availHeight contains the height of the screen excluding the task bar. You can test availWidth and availHeight compared to width and height. If they're both equal, then it's probably in full screen mode.

[tinfanide]

I try this:

 document.write(screen.height);document.write(screen availHeight); 

But when I press F11 in FF, it turns to its full screen mode but the screen availHeight is still not equal to screen height.Then how can I compare them to detect if users open FF in fullscreen mode? This is my script to detect the full screen mode:

function fullscreenConfig(){    if(navigator.userAgent.indexOf("Firefox")!=-1){        var fullscreenReminder = document.createElement("div");        fullscreenReminder.style.color = "white";        fullscreenReminder.innerHTML = "Press F11 on the keyboard to enjoy a fullscreen view of the gallery";        document.body.appendChild(fullscreenReminder);        if(parseInt(screen.availWidth) == parseInt(screen.width) && parseInt(screen.availHeight) == parseInt(screen.height))(alert("Fullscreen Mode"))        }    }

[Ingolme]

The numbers don't update automatically. When you change to full screen, the values printed there are still the old ones. Try running a function that prints the value when a button is clicked. Remember that some computers have the task bar on the bottom or top, while others have it on the sides, so you have to test both.

Javascript:function testSize() {  document.getElementById("output").innerHTML = "Full height: " + screen.height + "\nAvailable height: " + screen.availHeight;  document.getElementById("output").innerHTML += "Full width: " + screen.width+ "\nAvailable width: " + screen.availWidth;} HTML:<button type="button" onclick="testSize()">Click</button><div id="output"></div>

[tinfanide]

Well... I've tested the script. My screen resolution is: 1920*1080. When I click in non-fullscreen FF, the availHeight is 1040;When I run FF in fullscreen, I refresh the page and click the button again, the availHeight is still 1040. So I think it's impossible to detect if FF users switch to the fullscreen mode.

[Ingolme]

It seems that even when in full screen, the task bar doesn't actually disappear, so using the availWidth property won't help. I just tested, using window.outerWidth and window.outerHeight you can detect the size.

if(window.outerWidth == screen.width && window.outerHeight == screen.height) {  // The browser is in full screen mode}

outerWidth and outerHeight are exclusive to Firefox