Vollbildmodus erkennen

ein Ereignis wird ausgelöst, wenn der Browser den Vollbildmodus ändert. Sie können dies verwenden, um einen Variablenwert festzulegen, mit dem Sie feststellen können, ob der Browser Vollbild ist oder nicht.

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

}

Dies funktioniert auf IE9 + und anderen modernen Browsern

function isFullscreen(){ return 1 >= outerHeight - innerHeight };

Verwenden Sie "1" (anstelle von Null), da das System manchmal nur ein Pixel für die Mausinteraktion mit einigen versteckten oder verschiebbaren Befehlsleisten reserviert. In diesem Fall schlägt die Vollbilderkennung fehl. 

• kann auch arbeiten für jedes separate document-element jederzeit im Vollbildmodus ausgeführt werden.

Verwenden Sie das Ereignis fullscreenchange, um ein Änderungsereignis im Vollbildmodus zu erkennen. Wenn Sie keine Herstellerpräfixe verwenden möchten, können Sie auch das Ereignis resize abhören (das Fensteränderungsereignis, das auch ausgelöst wird, wenn der Vollbildmodus aktiviert oder beendet wird) und dann überprüft, ob document.fullscreenElement ist nicht null, um festzustellen, ob der Vollbildmodus aktiviert ist. Sie müssen dem Lieferanten das Präfix fullscreenElement entsprechend hinzufügen. Ich würde so etwas verwenden:

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

https://msdn.Microsoft.com/en-us/library/dn312066(v=vs.85).aspx hat ein gutes Beispiel dafür, das ich unten zitiere:

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

Es arbeitet in IE 8 und ich schreibe eine spezielle Webseite für IE 8. Ich muss nicht prüfen, ob die anderen Browser dies unterstützen oder nicht.

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

Versuche dies! Funktioniert für aktuelle Browser.

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

Sie können auch this jquery plugin für dasselbe verwenden.

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

Haben Sie $ (Fenster) anstelle von $ (Dokument) versucht? Folgen Sie einem Beispiel http://webification.com/tag/detect-fullscreen-jquery .

In Safari auf dem iPhone gibt die webkitDisplayingFullscreen-Eigenschaft true zurück, wenn <video> im Vollbildmodus abgespielt wird. Ref: https://developer.Apple.com/documentation/webkitjs/htmlvideoelement/1630493-webkitdisplayingfullscreen

Hier ist eine andere Lösung, die für Sie funktionieren könnte:

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

Ich ziehe es vor, die Breite zu verwenden, da dies dazu beiträgt, Registerkarten und Entwicklerinformationen unten zu umgehen.

Hier ist eine andere Lösung, die in IE 11 funktioniert:

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

});

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

Modernizr FTW ? Probieren Sie diesen Gist aus.

Ich habe einen guten Weg gefunden, dies zu tun:

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
}

Setzen Sie dann die Standardbreite des Körpers auf:

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