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 detect fullscreen with jQuery version 1.9.x and 2.x:

$(document).is(":fullscreen") 

it threw this error:

Syntax error, unrecognized expression: fullscreen

Questions:

1. Is it because jQuery doesn't recognize this standard yet or IE10?

2. What is the legacy way of checking fullscreen mode? I am expecting following results:

   function IsFullScreen() {
        /* Retrun TRUE */
        /* If UA exists in classic desktop and not in full screen  */
        /* Else return FALSE */
   }
   

3. Can we do it without browser sniffing?

Wimble

IE doesn't support :fullscreen, developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen – Delois

For the legacy question, see this duplicate: https://mcmap.net/q/281667/-detecting-if-a-browser-is-in-full-screen-mode/1180785 (although it has no definitive answer, it does have some hacks and browser-specific tests) – Centra

Try checking if window height equals screen height, but it's probably not very reliable either ? – Ehudd

The "legacy" answer is that browser didn't support "full screen" mode until very recently, and many of them still don't. – Hambley

FWIW, that piece of jQuery code doesn't work in latest Mozilla Firefox as well, where the pseudo-class is certainly defined. – Wimble

@Vohuman, IE11 does support prefixed version of :fullscreen: :ms-fullscreen and IE preview version has un-prefixed version support. Source: status.modern.ie/fullscreenapi?term=fullscreen. – Wimble

Almost 4 years since this question was asked - is there seriously still no standard way of doing this that works on browsers updated in the last 2 years? – Career

Part of the mess of answers here is that 2 different things are being discussed. "Fullscreen" is a loose term and refers to 2 different things in browsers: 1) the browser itself is full screen and the user is browsing the whole page in full screen, or 2) an object on the page has requested to go full screen by an API, hiding the rest of the page. The first has a bunch of fuzzy answers here because its need is fuzzy (a page need only know what size to adapt to and not how much it dominates the screen). The second, however, has solid support to allow a game or video to switch modes when needed. – Lichi

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
}

Camarata

Thanks for your answer. It works for now. Hopefully the browser vendors and jQuery guys would realize the importance of :fullscreen pseudo-class. – Wimble

For me the screen.height is equal to window.outerHeight, not innerHeight when in Fullscreen mode. – Epner

Some browsers keep their chrome (the tabs, titles, bookmark bar, etc) when in fullscreen, so window.outerHeight - window.innerHeight will equal the height of that stuff. Whether you use innerHeight or outerHeight and how you use them depends on what you want to detect. – Mihalco

screen.height and screen.availHeight don't work with multiple monitors. At least in IE 10, you always get the resolution of the primary monitor (which may not be the one displaying the browser window), so comparisons against window.innerHeight are completely meaningless. window.screenTop == 0 && window.screenY == 0 is a multi-monitor solution for IE 10, but this does not work in other browsers. – Villon

Well, well, well, looks like I found a little problem.. press F12 in Chrome and open the console, then press F11 and go to fullscreen mode, this code wont work then. Any solution? – Antipersonnel

Doesn't work right on chrome mobile.. (i assume its because my page height doesn't actually stretch over the fold) – Kubiak

This breaks when a user zooms in on the page. window.innerHeight changes and the detection doesn't work anymore. Possible fix for that? – Wrestle

will fail on double monitor setup, especially if a laptop is hooked on a secondary monitor with different resolution. – Ferebee

Use window.innerHeight * window.devicePixelRatio to be robust against zooming, both in browser and in operating systems supporting HiDPI. – Funch

Doesn't work in Chrome 86. screenHeight is 1080, innerHeight is 720 idk why :( – Dunstable

@Dunstable You are zoomed to 150%. See Palec's comment above on device pixel ratios. – Camarata

It works fine, but when the user opens devTools and the resolution emulator, the window.innerHeight turn equal to window.screen.height. Do you have another idea? – Etom

Answer 2

Reading MDN Web docs, I like this native method.

https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/fullscreenElement

function is_fullscreen(){
    return document.fullscreenElement != null;
}

or fancier

let is_fullscreen = () => !! document.fullscreenElement

This method also works when you open developer tools in browser. Because fullscreen is applied to a particular element, null means none of it is in fullscreen.

You can even extend to check a particular element eg:

function is_fullscreen(element=null){
    return element != null? document.fullscreenElement == element:document.fullscreenElement != null;
}

Which only return true if currently is fullscreen and (element is null or element is the fullscreened element)

Bateau

document.fullscreenElement is null if the user presses f11 themselves (or if you are iframed and the external site has fullscreened you) – Kathe

This should be the accepted answer. This works if an iframe is fullscreened from user input (tested in firefox and chrome). It's otherwise not possible to trigger fullscreen in an iframe or the main document. And since F11 fullscreen is a browser-level user preference outside of the page's ui, there will almost certainly never be built-in ways to detect or change it from js for similar security reasons. document.fullScreenElement is about as good as we're going to get short of checking dimensions. – Hellenist

Answer 3

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

}

Mauceri

this didn't properly detect if it was in full screen on chrome mobile.. changed it to: this.fullScreenMode = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen; – Kubiak

This only works for page-initiated fullscreen, not for browser fullscreen (F11). – Handyman

Answer 4

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.

Ferebee

Answer 5

Use fullscreenchange event to detect a fullscreen change event, or if you don't want to handle vendor prefixes than you can also listen to the resize event (the window resize event that also triggers when fullscreen is entered or exited) and then check if document.fullscreenElement is not null to determine if fullscreen mode is on. You'll need to vendor prefix fullscreenElement accordingly. I would use something like this:

var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement ||
document.webkitFullscreenElement || document.msFullscreenElement;

https://msdn.microsoft.com/en-us/library/dn312066(v=vs.85).aspx has a good example for this which I quote below:

document.addEventListener("fullscreenChange", function () {
          if (fullscreenElement != null) {
              console.info("Went full screen");
          } else {
              console.info("Exited full screen");              
          }
      });

Thenceforward

You might need to use webkitfullscreenchange or mozfullscreenchange. However, the event only fires when entering from Fullscreen API. If you enter full screen from Chrome's toolbar, for example, it won't fire. – Batholith

On chrome when you press F11 it does not fire the fullscreenchange event for some reason. Programmatically setting it in fullscreen does however. And to add to the problems, the event itself doesnt say if its going into or leaving fullscreen. On iOS devices they also seem to ignore the blocking of touchmove events which enables a user to drag the browser out of fullscreen just to add to the headache. – Backward

Answer 6

To update a JS variable:

window.matchMedia('(display-mode: fullscreen)').addEventListener('change', ({ matches }) => {
        if (matches) {
            window.isFullScreen=true;
        } else {
            window.isFullScreen=false;
        }
    });

Benzol

Best answer here. You can also initialise your variable storing it with window.isFullScreen = window.matchMedia('(display-mode: fullscreen)').matches – Kathe

Fantastic idea, asking for CSS @media property value from JavaScript – Fluter

Answer 7

Here is the most up to date answer. fully browser compatible with all the prefixes:

function IsFullScreen() {
     return !!(document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement)
}

credit to https://developers.google.com/web/fundamentals/native-hardware/fullscreen/

DEMO

function IsFullScreen() {
  console.log(!!(document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement))
}

<button onclick="IsFullScreen()">log fullscreen state</button>

Syndesis

not working on fedora 35 with chrome (always returning false) – Shadchan

document.fullscreenElement is null if the user presses f11 themselves (or if you are iframed and the external site has fullscreened you) – Kathe

Answer 8

It is working in IE 8 and I am writing a specific web page for IE 8. I do not need to check if the other browsers support this or not.

function isFullScreen(){
    return window.screenTop == 0 ? true : false;
}

Dulsea

Maybe you could simplify it by just returning return window.screenTop == 0. – Urn

Simple and surprisingly robust. Detects if the top of the viewport is the same as top of the screen. Breaks on multi-monitor systems when the window is not on the top screen. – Funch

wrong on chrome and on this page it returns 0 when is not fullscreen and 8 if I press F11 – Oligocene

Answer 9

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!');
}

});

Drusilla

Answer 10

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.

Kaja

this is a surprising and highly effective approach – Thicken

Answer 11

In a PWA, if you set in the manifest "fullscreen" then you can even do this:

window.isInstalled=window.matchMedia('(display-mode: standalone)').matches;
window.isOnHomepage=window.matchMedia('(display-mode: fulscreen)').matches;

Even if in the manifest there is "fullscreen", if the user instead of installing it, adds it as a bookmark to the hompage of the phone, it will register as "standalone", if instead it's installed as a PWA (apk) it will register as "fullscreen".

Oligocene

Answer 12

Did you try $(window) instead of $(document). Follow one example http://webification.com/tag/detect-fullscreen-jquery.

Centerpiece

Answer 13

Here's another solution that might work for you:

function isFullScreen() {
return Math.abs(screen.width - window.innerWidth) < 10; 
}

I prefer to use width since it will help work around tabs and developer info at the bottom.

Kempf

Answer 14

In Safari on iPhone, webkitDisplayingFullscreen property will return true if <video> is playing in fullscreen. Ref: https://developer.apple.com/documentation/webkitjs/htmlvideoelement/1630493-webkitdisplayingfullscreen

Forspent

Answer 15

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.

Perales

Answer 16

Thought I'd share this React soln as well, derived from the answers above

export const isFullScreen = () => {
    const fullScreenElement = document.fullscreenElement
        || document.webkitFullscreenElement
        || document.mozFullScreenElement
        || document.msFullscreenElement
        || null;
    
    if (fullScreenElement === null) return false;
    return true;
};

Pooch

Answer 17

Try this! Works for recent browsers.

if (!window.screenTop && !window.screenY) {
    alert('Fullscreen mode......');
}

You can also use this jquery plugin for same.

$(window).bind("fullscreen-on", function(e) {
alert("FULLSCREEN MODE");
});

Faxun

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). – Spinney

Doesn't work if browser (Chrome) is attached to top. – Ursel

Or if the window isn't on the primary monitor. It wasn't a big problem back in 2013, but it definitely is in 2022. – Handyman

Answer 18

var isFullScreen = function()
{
    var dom = document.createElement("img");
    if ("requestFullscreen" in dom
        || "requestFullScreen" in dom
        || "webkitRequestFullScreen" in dom
        || "mozRequestFullScreen" in dom){
        return !0;
    }
    return !1;
}

Hippomenes

this only detects if browser allows fullscreen or not – Yaker

No, it only detects the fullscreen API is supported or not for specific browsers/render engines. – Penates

Answer 19

I worked out a good way of doing this:

w = $('body').width();

if (w == '4800' || w == '4320' || w == '4096' || w == '3200' || w == '3072' || w == '2880' || w == '2560' || w == '2400' || w == '2160' || w == '2048' || w == '1920' || w == '1800' || w == '1620' || w == '1600' || w == '1536' || w == '1440' || w == '1280' || w == '1200' || w == '1152' || w == '1080' || w == '1050' || w == '1024' || w == '960' || w == '900' || w == '864' || w == '800' || w == '768' || w == '720') {
      //User is fullscreen
}

Then set the body default width to:

body { width: calc(100% - 1px) }

Cacus

and what if the user has made his browser smaller ... like half of the window? – Precarious

Then it isn't fullscreen... – Cacus

Answer 20

You can subscribe to the keydown event on window object. If the user presses F11 or Ctrl+command+F (macOS), call event.preventDefault() to prevent the browser fullscreen action. Instead you can call the requestFullscreen method or exitFullscreen method to change the fullscreen mode. In this way, the document.fullscreenElement will always has a value if the browser is in fullscreen mode.

This workaround breaks if the user uses the browser menu to enter fullscreen mode.

Gotham