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 det

Answer 1

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

Answer 2

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;
}

Answer 3

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)

Answer 4

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");              
          }
      });

Answer 5

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>

Answer 6

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) }