Jak wykryć przeglądarkę przeszła na pełny ekran

Question

TLDR;

Mogę wykryć, czy przeglądarka przeszła na pełny ekran przez pełny ekran API, ale nie mogę wykryć, że przeglądarka przeszła na pełny ekran poprzez f11 lub menu przeglądarki (konkretnie chrome).

oryginalny:

Obecnie używam screenfull aby przejść do pełnego ekranu i wykryć, że przeglądarka jest na pełnym ekranie. Problem polega na tym, że nie chcę wyświetlać przycisku przełączania na pełnym ekranie, gdy przeglądarka przeszła na pełny ekran za pośrednictwem funkcji przeglądarki (np. F11 lub pełny ekran w menu przeglądarki). Dzieje się tak dlatego, że interfejs API pełnego ekranu javascript nie jest w stanie wykryć, że jesteś na pełnym ekranie lub możesz wyjść z trybu pełnoekranowego, gdy przejdziesz tam przez funkcję przeglądarki. Mogłem po prostu wykryć, czy f11 zostało trafione, ale to nie działa na Macu lub gdy w menu przeglądarki zainicjowano pełny ekran.

Wszelkie pomysły dotyczące wykrywania, czy pełny ekran został uruchomiony za pomocą funkcji przeglądarki? Celuję tylko w przeglądarki kompatybilne z webgl, dzięki czemu zmniejszam liczbę kuponów.

Answer 1

Nie testowałem tego pod kątem niezawodności, ale to jest moje podejście.

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

To wydaje się działać po naciśnięciu przycisku F11 i innych metod, więc należy go złapać przypadki brzegowe, że pełne API ekran nie. Chociaż nie jestem pewien, czy porównanie ekranu screen.width vs. window.innerWidth jest niezawodnym sposobem sprawdzenia pełnego ekranu. Może ktoś inny może to dodać/skrytykować.

Answer 2

Użyj zdarzenia fullscreenchange do wykrycia zdarzenia zmiany pełnoekranowego lub jeśli nie chcesz obsługiwać prefiksów dostawcy, możesz również odsłuchać zdarzenie resize (zdarzenie zmiany rozmiaru okna, które jest również wyzwalane po wprowadzeniu lub zamknięciu trybu pełnoekranowego) i następnie sprawdź, czy document.fullscreenElement nie jest pusta, aby określić, czy tryb pełnoekranowy jest włączony. Musisz odpowiednio podać prefiks dostawcy fullscreenElement. Chciałbym użyć coś takiego:

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

https://msdn.microsoft.com/en-us/library/dn312066(v=vs.85).aspx ma dobry przykład na to, który cytuję poniżej. Zostały one wykorzystane zdarzenie fullscreenChange, ale można wykrywać zdarzenie "resize"

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