Come rilevare il browser è andato a schermo intero

Question

TLDR;

Sono in grado di rilevare se il browser è andato a schermo intero tramite l'API a schermo intero ma non riesco a rilevare che il browser è andato a schermo intero tramite f11 o il menu del browser (in particolare Chrome).

originale:

Attualmente sto usando screenfull di andare a schermo intero e rilevare che il browser è a schermo intero. Il problema è che non voglio visualizzare il mio pulsante di attivazione a schermo intero quando il browser è andato a schermo intero attraverso una funzione del browser (ad esempio f11 o schermo intero attraverso i menu del browser). Questo perché l'API di javascript a schermo intero non sembra in grado di rilevare che si è a schermo intero o si esce dallo schermo intero quando ci si è diretti attraverso una funzione del browser. Potrei solo rilevare se f11 è stato colpito, ma questo non funziona su Mac o quando è stato avviato a schermo intero attraverso i menu del browser.

Qualche idea su come rilevare se lo schermo intero è stato avviato tramite una funzione del browser? Sto solo prendendo di mira i browser compatibili con Webgl in modo da ridurre molti trucchi.

Answer 1

Non ho provato questo per l'affidabilità, ma questa è la mia opinione.

//without jQuery 
window.addEventListener('resize', function(){ 
    if(screen.width === window.innerWidth){ 
    // this is full screen 
    } 
}); 


    //with jQuery 
$(document).ready(function() { 
    $(window).on('resize', function(){ 
    if(screen.width === window.innerWidth){ 
     // this is full screen 
    } 
    }); 
}); 

Questo sembra funzionare quando si preme il tasto F11 e altri metodi, quindi dovrebbe catturare i casi limite che l'API a schermo intero non lo fa. Anche se non sono sicuro che il confronto tra screen.width vs. window.innerWidth sia un modo affidabile per controllare a schermo intero. Forse qualcun altro può aggiungere/criticare questo.

Answer 2

Utilizzare l'evento fullscreenchange per rilevare un evento di modifica a schermo intero o se non si desidera gestire i prefissi del fornitore di quello che si può anche ascoltare l'evento resize (l'evento di ridimensionamento della finestra che si attiva anche quando si entra o esce a schermo intero) e quindi verificare se document.fullscreenElement non è nullo per determinare se la modalità a schermo intero è attiva. Avrai bisogno di prefisso fornitore fullscreenElement di conseguenza. Vorrei usare qualcosa di simile:

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

https://msdn.microsoft.com/en-us/library/dn312066(v=vs.85).aspx ha un buon esempio per questo che cito qui di seguito. Hanno usato l'evento fullscreenChange, ma si potrebbe intercettare l'evento "resize"

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