web-dev-qa-db-de.com

Vollbildmodus erkennen

Die moderne Desktop-Version von IE 10 ist immer im Vollbildmodus.

Es gibt eine living-Spezifikation für :fullscreen-Pseudoklasse auf W3

Aber als ich versuchte, Vollbild mit jQuery Version 1.9.x und 2.x zu erkennen:

$(document).is(":fullscreen") 

es warf diesen Fehler:

Syntaxfehler, nicht erkannter Ausdruck: Vollbild

Fragen:

  1. Ist es, weil jQuery diesen Standard oder IE10 noch nicht erkennt?

  2. Wie kann der Vollbildmodus mit veraltet überprüft werden? Ich erwarte folgende Ergebnisse:

    function IsFullScreen() {
         /* Retrun TRUE */
         /* If UA exists in classic desktop and not in full screen  */
         /* Else return FALSE */
    }
    
  3. Können wir das ohne Browser-Sniffing tun?

44
Annie

Wie Sie festgestellt haben, ist die Browserkompatibilität ein großer Nachteil. Das ist doch etwas sehr Neues.

Da Sie jedoch in JavaScript arbeiten, stehen Ihnen weit mehr Optionen zur Verfügung als bei der Verwendung von CSS.

Zum Beispiel:

if( window.innerHeight == screen.height) {
    // browser is fullscreen
}

Sie können auch nach etwas lockeren Vergleichen suchen:

if( (screen.availHeight || screen.height-30) <= window.innerHeight) {
    // browser is almost certainly fullscreen
}
55

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

}
12
anurag_29

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.
6
Bekim Bacaj

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

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

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

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

0
Gustavo Alves

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

0
ColCh

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.

0
Joshua Olson

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

});

0
Petryk
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;
}
0
xicooc

Modernizr FTW ? Probieren Sie diesen Gist aus.

0
Ahmad Alfy

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) }
0
Jack Nicholson