2010-05-19 15 views
31

Mögliche Duplizieren:
Detecting if a browser is in full screen modeprüft Browser im Vollbild ist

Gibt es eine Möglichkeit zu überprüfen, ob ein Browser zur Zeit im Vollbild-Modus ist (nachdem der Benutzer gedrückt f11)?

Etwas wie:

if (window.fullscreen) { 
    // it's fullscreen! 
} 
else { 
    // not fs! 
} 

Dank.

Steerpike Antwort der ist ziemlich gut, aber mein Kommentar:

Vielen Dank, aber diese Antwort ist nicht für FF ausreichend. In Chrome kann ich eine kleine Toleranz setzen, aber in FF URL und Tabs dauert eine Weile bis verschwinden, was bedeutet, nach dem Drücken f11, ist die erkannte window.innerWidth immer noch zu klein.

Antwort

16

In Firefox 3 arbeitet window.fullScreen (https://developer.mozilla.org/en/DOM/window.fullScreen).

So könnten Sie möglicherweise so etwas tun:

if((window.fullScreen) || 
    (window.innerWidth == screen.width && window.innerHeight == screen.height)) { 

} else { 

} 
+1

* Nur ein fyi: * das (die zweite Hälfte) wird nicht funktionieren, wenn Sie die Webkonsole Ihres Browsers geöffnet haben, was Sie * tun *, weil Sie dies * testen *. Darüber hinaus ist die Implementierung der Vollbild-API in * allen * Browsern ab 2017 mindestens so konsistent wie der Gewinn im Lotto. – John

+0

Ye gods, diese Antwort wurde für Firefox 3, vor fast 7 Jahren geschrieben (Manchmal denke ich, dass hier ein Ablaufdatum auf akzeptierten Antworten sein muss). Ich bin überrascht und nicht überrascht, dass sie noch keinen Standard haben. Auch das [CSS Stuff] (https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen) ist noch experimentell. – user4815162342

+0

Schön, das hat mir den Arsch gerettet. – Alex

9
if(window.innerWidth == screen.width && window.innerHeight == screen.height) { 

} else { 

} 

(Achtung: Der Browser Chrome mit den Höhen Vergleichen Dreck kann aber die Breiten Kontrollen sollen auf hübschen Ort sein)

+0

ich Sie erwarten werde etwas Spielraum der Differenz haben wollen, einige seit Browser haben immer noch ein paar Pixel oben, die für einen Balken reserviert sind, der nach unten rutscht, wenn Sie den Mauszeiger darüber bewegen. – Kazar

+1

Ja, der Check braucht definitiv etwas Toleranz. Anders als das: +1 –

+0

Vergessen Sie nicht, dass 'innerWidth' und' innerHeight' vom IE nicht unterstützt werden (http://www.quirksmode.org/dom/w3c_cssom.html#windowview). – CMS

22

Dies funktioniert für alle neuen Browser:

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

Gute Antwort, aber können Sie genauer über "neu" sein? – JohnFx

+0

Getestet in IE8, FF3.6, FF12. Funktioniert in allen. –

+0

Funktioniert nicht in IE6. –

3

Ich habe mit folgender Lösung endete:

function _fullscreenEnabled() { 
    // FF provides nice flag, maybe others will add support for this later on? 
    if(window['fullScreen'] !== undefined) { 
     return window.fullScreen; 
    } 
    // 5px height margin, just in case (needed by e.g. IE) 
    var heightMargin = 5; 
    if($.browser.webkit && /Apple Computer/.test(navigator.vendor)) { 
     // Safari in full screen mode shows the navigation bar, 
     // which is 40px 
     heightMargin = 42; 
    } 
    return screen.width == window.innerWidth && 
     Math.abs(screen.height - window.innerHeight) < heightMargin; 
    } 

Das funktioniert in jedem Browser, der mir wichtig ist (Chrome, FF, IE, Safari/Mac, Opera).

Update: Es funktioniert nicht auf Opera/Mac, Opera auf Mac, während im Vollbildmodus nur die 'gemeinsamen' OSX-Menü versteckt, so Höhe unterscheidet sich nur um einige Pixel, die für mich zu gefährlich ist.

+1

Es funktioniert nicht mit Chrom (auf Linux) und mehreren Bildschirmen - screen.width/height scheint die primäre Bildschirmgröße zu melden, auch wenn die Seite Vollbild auf dem sekundären Monitor ist. –

+0

auf chrome/linux, "if ($. Browser.webkit" bricht –

1

Einfach genug: Finden Sie das Browser-Ansichtsfenster mit $(window).width() und $(window).height(), und wenn sie auf einen Satz von definierten Darstellungsgrößen (600 x 480, 1280 x 800, etc.) entsprechen, dann können Sie wissen, dass es sehr wahrscheinlich ist größer anzeigen . Sie können auch Ereignishandler für den Schlüssel fll und andere mögliche Verknüpfungen festlegen, um den Vollbildmodus des Browsers zu definieren.

+0

window.outerHeight und window.outerWidth geben die äußeren Abmessungen des Browserfensters an. window.screen.height und window screen.width geben die Anzeigedimensionen des aktuellen an Wenn diese beiden Breite/Höhe-Paare gleich sind und vernünftige Werte anzeigen (so wie beide 1920x1200 anzeigen), dann kann für diesen Browser Vollbild angenommen werden. –

2

dies auf gängigen Browsern funktioniert (dh ff, Oper, Chrom)

function isFullscreen(){ 

    if($.browser.opera){ 

    var fs=$('<div class="fullscreen"></div>'); 
    $('body').append(fs); 

    var check=fs.css('display')=='block'; 
    fs.remove(); 

    return check; 
    } 

    var st=screen.top || screen.availTop || window.screenTop; 

    if(st!=window.screenY){ 

    return false; 
    } 

    return window.fullScreen==true || screen.height-document.documentElement.clientHeight<=30; 
} 

CSS für Oper:

.fullscreen { display: none; } 

@media all and (view-mode: fullscreen){ 

    .fullscreen { display: block; } 
}