it-swarm.com.de

So blenden Sie die Navigationsleiste in iPhone / HTML5 vollständig aus

Ich bin wirklich neu in HTML5 für Handys. Ich verwende jQuery Mobile für meine aktuelle App und habe einige Probleme, die Navigationsleiste auszublenden.

Ich habe diese Seite gefunden: http://m.somethingborrowedmovie.warnerbros.com/ . (Ich füge diesen Link nicht ein, um den Film zu promoten.)

Ich war nur erstaunt über diese HTML5-Site. Hat jemand eine Vorstellung von der Methode, mit der die Navigationsleiste ausgeblendet wird?

Das Menü ist auch wirklich gut gemacht. Gibt es einen Rahmen, um Apps wie diese zu erstellen?

26
Luc

Versuche Folgendes:

  1. Fügen Sie dieses meta -Tag in das head Ihrer HTML-Datei ein:

    <meta name="Apple-mobile-web-app-capable" content="yes" />
    
  2. Öffnen Sie Ihre Site mit Safari auf dem iPhone und fügen Sie Ihre Site mithilfe der Lesezeichenfunktion zum Startbildschirm hinzu.

  3. Kehren Sie zum Startbildschirm zurück und öffnen Sie die mit einem Lesezeichen versehene Site. Die URL und die Statusleiste werden ausgeblendet.

Solange Sie nur mit dem iPhone arbeiten müssen, sollten Sie mit dieser Lösung zurechtkommen.

Darüber hinaus verwendet Ihr Beispiel auf der Website warnerbros.com das Sencha-Touch-Framework . Sie können Google it für weitere Informationen oder Schauen Sie sich die Demos an .

59
Minh Le

Remy Sharp hat eine gute Beschreibung des Prozesses in seinem Artikel "Richtig machen: Überspringen der iPhone-URL-Leiste" :

Es ist ziemlich einfach, die URL-Leiste auf dem iPhone auszublenden. Führen Sie dazu das folgende JavaScript aus:

window.scrollTo(0, 1); 

Es ist jedoch die Frage, wann? Sie müssen dies tun, sobald die Höhe korrekt ist, damit das iPhone zum ersten Pixel des Dokuments scrollen kann. Andernfalls wird versucht, es erneut zu versuchen. Die Höhe wird geladen und zwingt die URL-Leiste, wieder angezeigt zu werden.

Sie können warten, bis die Bilder geladen wurden und das window.onload-Ereignis ausgelöst wird. Dies funktioniert jedoch nicht immer. Wenn alles zwischengespeichert ist, wird das Ereignis zu früh ausgelöst und scrollTo hat nie die Möglichkeit zu springen. Hier ist ein Beispiel mit window.onload: http://jsbin.com/edifu4/4/

Ich persönlich benutze einen Timer für 1 Sekunde - das ist genug Zeit auf einem mobilen Gerät, während Sie auf das Rendern warten, aber lang genug, damit es nicht zu früh ausgelöst wird:

setTimeout(function () {   window.scrollTo(0, 1); }, 1000);

Sie möchten jedoch, dass dies nur eingerichtet wird, wenn es sich um einen iPhone-Browser (oder nur um einen mobilen Browser) handelt, also um einen Sneaky Sniff (ich empfehle dies im Allgemeinen nicht, aber ich bin damit einverstanden, um zu verhindern, dass "normale" Desktop-Browser um ein Pixel springen ):

/mobile/i.test(navigator.userAgent) && setTimeout(function
() {   window.scrollTo(0, 1); }, 1000); 

Der allerletzte Teil davon, und dies ist der Teil, der in einigen Beispielen, die ich im Internet gesehen habe, zu fehlen scheint, ist der folgende: Wenn der Benutzer speziell mit einem URL-Fragment verknüpft ist, dh die URL hat einen Hash darauf, Sie will nicht springen Wenn ich also zu http://full-frontal.org/tickets#dayconf navigiere, möchte ich, dass der Browser auf natürliche Weise zu dem Element navigiert, dessen ID lautet dayconf und nicht mit scrollTo (0, 1) nach oben springen:

/mobile/i.test(navigator.userAgent) && !location.hash &&
setTimeout(function () {   window.scrollTo(0, 1); }, 1000);​

Probieren Sie dies auf einem iPhone (oder Simulator) aus http://jsbin.com/edifu4/10 und Sie werden sehen, dass es nur beim Scrollen angezeigt wird bin auf der seite ohne url fragment gelandet.

34
bnabilos

Das Problem mit all den bisher gegebenen Antworten ist, dass auf der ausgeliehenen Site die Mac-Leiste beim Scrollen vollständig ausgeblendet bleibt. Wenn Sie nur die scrollTo-Lösung verwenden und der Benutzer dann einen Bildlauf nach oben durchführt, wird die Navigationsleiste erneut eingeblendet Es sieht so aus, als ob die gesamte Site in einem Div mit aktiviertem Bildlauf enthalten ist, sodass anstelle des Bildlaufs auf der Seite nur ein Bildlauf innerhalb des Div ausgeführt wird und die Navigationsleiste ausgeblendet bleibt. Die einzige Möglichkeit, die Navigationsleiste anzuzeigen, besteht darin, den oberen Bildschirmrand zu berühren.

1
EmmaGamma