检测全屏模式

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?

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
}

Answer 2

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

}

Answer 3

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.

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

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 6

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 7

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

Answer 8

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

});

Answer 9

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

Answer 10

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

Answer 11

Modernizr FTW ? Give this gist a try.

Answer 12

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.

Answer 13

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

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

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 .

Answer 16

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.

Answer 17

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.

Answer 18

To update a JS variable:

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

Answer 19

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

Answer 20

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".

Answer 21

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