iOS6 Safari Vollbild Erkennung

Question

Ich möchte die neue Vollbild-Funktion von Safari in iOS6 nutzen. Jetzt weiß ich, dass es nicht möglich ist, die Vollbildfunktion über Javascript auszulösen, und das ist okay, aber ich würde gerne wissen, wann der Benutzer in den Vollbildmodus wechselt. (Um ein Popup mit dem Text anzuzeigen "diese Website wird am besten im Vollbildmodus angezeigt", bis der Benutzer Vollbildmodus)

Ich habe versucht, das Fenster, das Dokument und ein 'Wrapper' div (mit Breite und höhe auf 100% in css gesetzt) ​​onresize-ereignisse (über normales javascript und über das jQuery-resize-event), aber sie werden nicht ausgelöst, wenn ich in den bildschirm-modus gehe.

Ich habe auch ein Intervall festgelegt, um die Änderung der Breite und Höhe des Bildschirms/Dokument/Wrapper zu überprüfen, aber sie zeigten keine Änderung.

Gibt es eine andere Möglichkeit festzustellen, ob der Benutzer den Vollbildmodus aufgerufen (oder verlassen) hat?

Answer 1

Okay, ich weiß nicht wirklich, warum es vorher nicht funktioniert hat, aber ich beschuldige die neue Safari IOS Debug Konsole (die jetzt benötigt wird, um Safari auf Ihrem Mac zu gehen), weil es nicht immer angezeigt wurde Alle Protokolle, die ich an die Konsole gesendet habe.

Wenn ich jedoch nur die Nachrichten an den Körper des HTML-Dokuments selbst angehängt hat, haben die Ereignisse funktioniert. Das jQuery 'resize' Ereignis an das Fenster zu binden scheint die beste Option zu sein.

Das Dokument Höhe ist etwas rund 200, wenn nicht die gesamte Bildschirm und wenn die Vollbild es 320 ist

Die einfachste Lösung scheint einfach zu funktionieren. (Kombinieren Sie es einfach mit einer Funktion zum Ändern der Ausrichtung, um zu erkennen, ob sich das iPhone im Querformat befindet (http://ajaxian.com/archives/iphone-windowonorientationchange-code)).

$(window).on('resize', function(){ 
     if ($(this).height() > 300 && 
      (window.orientation == 90 || window.orientation == -90)) { 
      // Full screen! 
     } else { 
      // Exit full screen! 
     } 
    });