2010-05-19 18 views
31

Eventuali duplicati:
Detecting if a browser is in full screen modeVerificando browser è in fullscreen

C'è un modo per verificare se un browser è attualmente in modalità a schermo intero (dopo che l'utente preme F11)?

Qualcosa di simile:

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

Grazie.

risposta di Steerpike è abbastanza buono, ma il mio commento:

Grazie tante, ma questa risposta non è sufficiente per FF. In Chrome posso impostare nella barra degli indirizzi urlbar e le schede richiedono un po 'di tempo per scomparire, il che significa che dopo aver premuto f11, la finestra rilevata è inferiore a .

risposta

16

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

Quindi, si potrebbe fare qualcosa di simile:

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

} else { 

} 
+1

* Solo una sequenza: * questa (la seconda metà) non funzionerà se la console web del browser è aperta, cosa che * fai *, perché * lo * stai testando. Inoltre, almeno dal 2017, l'implementazione dell'API Fullscreen nei browser * all * è coerente quanto la vincita della lotteria. – John

+0

Ye Gods, questa risposta è stata pubblicata per Firefox 3, quasi 7 anni fa (a volte penso che ci debba essere una data di scadenza per le risposte accettate qui). Sono entrambi sorpreso e non sorpreso che non abbiano ancora uno standard. Anche il [CSS Stuff] (https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen) è ancora sperimentale. – user4815162342

+0

Bello, questo mi ha salvato il culo. – Alex

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

} else { 

} 

(Attenzione: Il cromo browser potrebbe letame con i confronti di altezza, ma i controlli di larghezza dovrebbe essere abbastanza posto su)

+0

mi aspetto che si vuole avere qualche margine di differenza, dal momento che alcuni i browser hanno ancora un paio di pixel nella parte superiore riservata per una barra che scivolerà verso il basso quando passi il mouse su di essa, che eliminerà questo controllo. – Kazar

+1

Sì, il controllo ha decisamente bisogno di un po 'di tolleranza. A parte questo: +1 –

+0

Non dimenticare che 'innerWidth' e' innerHeight' sono [non supportati] (http://www.quirksmode.org/dom/w3c_cssom.html#windowview) di IE. – CMS

22

Questo funziona per tutti i nuovi browser:

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

Buona risposta, ma puoi essere più specifico su "nuovo"? – JohnFx

+0

Testato in IE8, FF3.6, FF12. Funziona in tutti loro. –

+0

Non funziona in IE6. –

3

ho finito con seguente soluzione:

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

Che funziona su tutti i browser a cui tengo (Chrome, FF, IE, Safari/Mac, Opera).

Aggiornamento: non funziona su Opera/Mac, Opera su Mac mentre nella modalità a schermo intero nasconde solo il menu OSX 'comune', quindi l'altezza differisce solo di pochi pixel che è troppo pericoloso per me.

+1

Non funziona con cromo (su linux) e schermi multipli - screen.width/height sembra riportare le dimensioni dello schermo principale, anche se la pagina è a schermo intero sul monitor secondario. –

+0

su chrome/linux, "if ($. Browser.webkit" si interrompe –

1

Abbastanza semplice: Trovare la finestra del browser utilizzando $(window).width() e $(window).height(), e se sono conformi a una serie di dimensioni viewport definiti (600 x 480, 1280 x 800, ecc), allora si può sapere che è più probabile che a schermo intero . Inoltre è possibile impostare gestori di eventi come la chiave fll e altri collegamenti possibili per definire il browser a schermo intero.

+0

window.outerHeight e window.outerWidth indicano le dimensioni esterne della finestra del browser. window.screen.height e window screen.width indicano le dimensioni di visualizzazione della corrente pannello di visualizzazione Se queste due coppie larghezza/altezza sono uguali e indicano valori ragionevoli (come ad esempio entrambi che indicano 1920x1200), è possibile assumere a schermo intero tale browser. –

2

questo funziona sui principali browser (ad esempio, FF, Opera, Chrome)

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 per l'opera:

.fullscreen { display: none; } 

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

    .fullscreen { display: block; } 
}