Checking if browser is in fullscreen

Question

Is there a way to check if a browser is currently in fullscreen mode (after the user pressed f11)?

Something like:

if (window.fullscreen) {
  // it's fullscreen!
}
else {
  // not fs!
}

Thanks.

Steerpike's answer is pretty good, but my comment:

Thanks a lot, but this answer is not sufficient for FF. In Chrome I can set a small tolerance, but in FF the urlbar and tabs takes a while to disappear, which means after pressing f11, the detected window.innerWidth is still too small.

**You could also use `document.fullscreenElement` to get element if it exists else it will be `null`. Inner- and screen width are not reliable, for example, if you open dev tools the inner sizes will not be the same as screen sizes. You can assign `document.onfullscreenchange` to this method to get an instant response when changing between fullscreen and off.** — tscpp, Sep 29 '19 at 11:11
There's an API now: https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API — Claude Martin, Sep 17 '20 at 07:06

score 41 · Answer 1 · edited Oct 22 '11 at 03:36

41

This works for all new browsers :

if (!window.screenTop && !window.screenY) {
    alert('Browser is in fullscreen');
}

edited Oct 22 '11 at 03:36

HoLyVieR

10,985
5
42
67

answered Oct 21 '11 at 21:57

Tom Ulatowski

509
4
2

3

Good answer, but can you be more specific about "new"? – JohnFx Nov 15 '11 at 23:40
Tested in IE8, FF3.6, FF12. Works in all of them. – Petr Janeček Jun 11 '12 at 10:24
7

In chrome maximized also triggers this. – Josh Jun 20 '12 at 17:52
With .screenLeft instead of .screenY it works better (in Win8/IE10) – LosManos Apr 30 '13 at 13:23
Doesn't work if a user has no top panel. – Vanuan Jul 22 '13 at 08:39
2

No, not true, on Windows if you attach your browser window right to top of the screen, that condition will be true as well. – igorpavlov Aug 12 '14 at 14:19
15

does not work for chrome today – Sebas Mar 16 '15 at 03:22
Does not work for me; when the window is maximized, window.screenTop == 0 (chrome 54). – Niek Nov 18 '16 at 15:33
Not working for firefox in android – Ural Apr 12 '17 at 09:56
This does not consider whether the window is full width, nor does it distinguish full height windows from windows in full screen mode. – highvolt Sep 26 '17 at 12:57
This solution is unreliable when using external monitor(s) – resu Apr 17 '19 at 18:54
Also moot on mobile ! – maigre Sep 27 '20 at 16:55
This works in a Quasar/Electron app.. which is good enough for my needs. Thank you! – Albert Rannetsperger Aug 06 '21 at 18:56

user4815162342 · Accepted Answer · 2022-08-22T17:22:35.927

37

WARNING: This answer was posted for a very old version of Firefox. Your answer is probably not here, keep looking.

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

So, you could potentially do something like this:

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

} else {

}

edited Aug 22 '22 at 17:22

answered Jul 30 '10 at 15:18

user4815162342

2,058
3
18
23

8

*Just an fyi:* this (the second half) won't work if you have your browser's web console open, which you *do*, because you *are* testing this. Additionally, at least as of 2017, the implementation of the Fullscreen API in *all* browsers is about as consistent as winning the lottery. – John Feb 13 '17 at 11:57
1

Ye gods, this answer was posted for Firefox 3, almost 7 years ago (Sometimes I think there needs to be an expiration date on accepted answers here). I'm both surprised and not surprised they don't have a standard yet. Even the [CSS Stuff](https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen) is still experimental. – user4815162342 Apr 16 '17 at 13:53
2

AS of `18 https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/fullscreenElement – Seph Reed Apr 12 '18 at 21:37
2

`fullscreenElement` only works for JS triggered fullscreen, not user pressing F11. – riv Aug 01 '19 at 21:36
Does not work if something like Dev Console is open. – Arvy Aug 02 '19 at 19:39
Also doesn't work when zoomed in/out.. – gaspar Aug 21 '22 at 15:40
@gaspar of course it doesn't work. This answer was posted in 2010. There are people learning to program who weren't born when this was posted. – user4815162342 Aug 22 '22 at 17:23
I used `document.fullscreenElement` and the window's width and height and it worked well, even when the user uses `F11`. – Nick Nov 28 '22 at 15:17
@Nick can you write an answer with your solution code? – eri0o Feb 18 '23 at 20:07
I used a conditional for `document.fullscreenElement`: "if (document.fullscreenElement != null) { document.exitFullscreen(); } else { document.body.requestFullscreen(); }" – Nick Feb 24 '23 at 01:40

score 9 · Answer 3 · answered May 19 '10 at 06:42

9

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

} else {

}

(Warning: The browser chrome may muck with the height comparisons but the width checks should be pretty spot on)

answered May 19 '10 at 06:42

Steerpike

17,163
8
39
53

I expect you'll want to have some margin of difference, since some browsers still have a couple of pixels at the top reserved for a bar that will slide down when you hover over it, which will throw off this check. – Alistair Evans May 19 '10 at 06:46
1

Yeah, the check definitely needs some tolerance. Other than that: +1 – Pekka May 19 '10 at 06:52
Don't forget that `innerWidth` and `innerHeight` are [not supported](http://www.quirksmode.org/dom/w3c_cssom.html#windowview) by IE. – Christian C. Salvadó May 19 '10 at 06:55
Thanks a lot, but this answer is not sufficient for FF. In Chrome I can set a small tolerance, but in FF the urlbar and tabs takes a while to disappear, which means after pressing f11, the detected window.innerWidth is still too small. – Mark May 19 '10 at 08:39
You could still admit a bigger tolerance, as most of the browser have at least an address bar, you can guess that the height difference could be of n pixels. – Boris Guéry May 19 '10 at 08:53
OK, yes you're right... why did I think that... Sorry, way too late! A value of 63px worked for me. – Mark May 19 '10 at 09:19
You should consider window.outerHeight as it's more reliable for detecting if browser is at MaxHeight compared to screen.height – Ivan Nov 10 '19 at 20:55

score 2 · Answer 4 · answered May 13 '12 at 10:18

I've ended up with following solution:

function _fullscreenEnabled() {
    // FF provides nice flag, maybe others will add support for this later on?
    if(window['fullScreen'] !== undefined) {
      return window.fullScreen;
    }
    // 5px height margin, just in case (needed by e.g. IE)
    var heightMargin = 5;
    if($.browser.webkit && /Apple Computer/.test(navigator.vendor)) {
      // Safari in full screen mode shows the navigation bar, 
      // which is 40px  
      heightMargin = 42;
    }
    return screen.width == window.innerWidth &&
        Math.abs(screen.height - window.innerHeight) < heightMargin;
  }

Which works in every browser I care about (Chrome, FF, IE, Safari/Mac, Opera).

Update: It doesn't work on Opera/Mac, Opera on Mac while in full screen mode hides only the 'common' OSX menu, thus height differs only by few pixels which is too dangerous for me.

It doesn't work with chromium (on linux) and multiple screens -- screen.width/height seems to report the primary screen size, even if the page is fullscreen on the secondary monitor. — DirtY iCE, Jun 05 '13 at 14:10

score 0 · Answer 5 · edited Oct 31 '16 at 19:32

this works on major browsers (ie,ff,opera,chrome)

function isFullscreen(){

  if($.browser.opera){

    var fs=$('<div class="fullscreen"></div>');
    $('body').append(fs);

    var check=fs.css('display')=='block';
    fs.remove();

    return check;
  }

  var st=screen.top || screen.availTop || window.screenTop;

  if(st!=window.screenY){

    return false;
  }

  return window.fullScreen==true || screen.height-document.documentElement.clientHeight<=30;
}

css for opera:

.fullscreen { display: none; }

@media all and (view-mode: fullscreen){

  .fullscreen { display: block; }
}

score -1 · Answer 6 · answered Aug 19 '12 at 08:55

-1

Simple enough: Find the browser viewport using $(window).width() and $(window).height(), and if they conform to a set of defined viewport sizes (600 x 480, 1280 x 800, etc.), then you can know that it is most likely fullscreen. Also you can set event handlers for like the fll key and other possible shortcuts to define browser fullscreen.

answered Aug 19 '12 at 08:55

Lucas

16,930
31
110
182

window.outerHeight and window.outerWidth indicate the browser window outer dimensions. window.screen.height and window screen.width indicate the display dimensions of the current display panel. If these two width/height pairs are equal and indicate reasonable values (such as both indicating 1920x1200) then Full Screen can be assumed for that browser. – Gunnar Forsgren - Mobimation Feb 17 '17 at 13:12

Checking if browser is in fullscreen

6 Answers6

Linked