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

This works for all new browsers :

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

Answer 2

Right. Totally late on this one...

As of 25th Nov, 2014 (Time of writing), it is possible for elements to request fullscreen access, and subsequently control entering/exiting fullscreen mode.

MDN Explanation here: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode

Straightforward explanation by David Walsh: http://davidwalsh.name/fullscreen

Answer 3

Chrome 15, Firefox 10, and Safari 5.1 now provide APIs to programmatically trigger fullscreen mode. Fullscreen mode triggered this way provides events to detect fullscreen changes and CSS pseudo-classes for styling fullscreen elements.

See this hacks.mozilla.org blog post for details.

Answer 4

What about determining the distance between the viewport width and the resolution width and likewise for height. If it is a small amount of pixels (especially for height) it may be at fullscreen.

However, this will never be reliable.

Answer 5

Opera treats full screen as a different CSS media type. They call it Opera Show, and you can control it yourself easily:

@media projection {
  /* these rules only apply in full screen mode */
}

Combined with Opera@USB, I've personally found it extremely handy.

Answer 6

To detect whether browser is in fullscreen mode:

document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement

according to caniuse you should be fine for majority of browsers.