iPad WebApp Vollbild in Safari

83

Apple sagt in der Safari HTML-Referenz, dass der folgende Code die Web-App unter iPhone OS 2.1 und höher als Vollbild anzeigen soll.

 <meta name="apple-mobile-web-app-capable" content="yes">

Aber es scheint nicht zu funktionieren. Gibt es eine Möglichkeit, die Titel- / Standortleiste in Safari in einer iPad-WebApp auszublenden?

ipad web-applications iphone-standalone-web-app ChrisB
quelle

Antworten:

120

Dies funktioniert erst, nachdem Sie ein Lesezeichen in der App auf dem Startbildschirm gespeichert haben. Nicht, wenn Sie nur normal zur Website navigieren.

Jamone
quelle
13
Wenn Sie dieses Meta-Tag zu Ihrer alten URL-Webseite hinzufügen, die Sie zuvor in Safari durchsucht haben, müssen Sie zuerst die URL aktualisieren und dann zum Startbildschirm hinzufügen, damit das Meta-Tag funktioniert.
Scott Chu
Bei einem Laravel-Projekt funktioniert das bei mir nicht. Ich habe dies zu meiner Layout-Vorlage für app.blade hinzugefügt. Dies wird von jeder meiner Seiten verwendet, daher sollte (und wird) der Header auf jeder Seite erscheinen. Trotzdem habe ich auf meinem iPhone und iPad immer noch Safari-Balken, auch nachdem ich viele Tests durchgeführt habe, um den Cache zu leeren. Erstellen Sie die in diesem Beitrag erwähnte Verknüpfung zum Startbildschirm neu. Gibt es noch etwas, das verhindern könnte, dass sich die Safari-Bars verstecken? pastebin.com/iSFDXjFz hier ist der Kopfbereich meiner Datei app.blade.php. Danke im Voraus.
Frantumn
14

Wenn Sie in einem Browser bleiben möchten, ohne ein neues Fenster zu öffnen, verwenden Sie diesen HTML-Code:

<a href="javascript:this.location = 'index.php?page=1'">
Remco de Jong
quelle
4
Dies scheint für die jeweilige Frage oder das jeweilige Thema nicht relevant zu sein. Vielleicht könnten Sie erklären, wie es zusammenhängt?
skeggse
6
Sehr relevant. Es ist immer die nächste Ausgabe, nachdem die Web-App im Vollbildmodus angezeigt wurde.
Garnelenwagen
Für mich lautet die nächste Ausgabe: "Wie aktualisiere ich die Seite jetzt, da sie sich im Vollbildmodus befindet?"
Nick
13

  1. Starten Sie zunächst Ihren Safari-Browser über den Startbildschirm und rufen Sie die Webseite auf, die Sie im Vollbildmodus anzeigen möchten.

  2. Tippen Sie nach dem Auffinden der Webseite auf das Pfeilsymbol oben auf dem Bildschirm.

  3. Tippen Sie im Dropdown-Menü auf die Option Zum Startbildschirm hinzufügen.

  4. Das Fenster Zu Start hinzufügen sollte angezeigt werden. Sie können die Beschreibung anpassen, die als Titel auf dem Startbildschirm Ihres iPad angezeigt wird. Wenn Sie fertig sind, tippen Sie auf die Schaltfläche Hinzufügen.

  5. Auf Ihrem Startbildschirm sollte nun ein neues Symbol angezeigt werden. Durch Tippen auf das Symbol wird die Webseite im Vollbildmodus geöffnet.

Hinweis: Das Symbol auf Ihrem iPad-Startbildschirm öffnet die mit Lesezeichen versehene Seite nur im Vollbildmodus. Die nächste Seite, die Sie besuchen, enthält die Safari-Adresse und die Titelleisten. Diese Art der Wiedergabe Ihrer Webseite oder HTML5-Präsentation im Vollbildmodus funktioniert, wenn der Quellcode der Webseite das folgende Tag enthält:

<meta name="apple-mobile-web-app-capable" content="yes">

Sie können dieses Tag mit einem Drittanbieter-Tool zu Ihrer Webseite hinzufügen, z. B. mit dem iWeb SEO Tool oder einem anderen von Ihnen gewünschten Tool. Bitte beachten Sie, dass Sie zuerst das Tag hinzufügen, die Seite aktualisieren und dann Ihrem Startbildschirm ein Lesezeichen hinzufügen müssen.

Code.Town
quelle
Sie hätten sagen können, dass dies eine direkte Kopie einer Anweisung ist, die unter ispringsolutions.com/articles/… :-)
Jochem Schulenklopper
2
Und vielleicht haben sie meine kopiert. :) Sehen Sie sich das Datum an, an dem ich diese Frage beantwortet habe, und vergleichen Sie es mit dem Veröffentlichungsdatum.
Code.Town
Prost! Das ist eine Art von dir. :)
Code.Town
7

Es wird nur die erste (mit Lesezeichen versehene) Seite im Vollbildmodus geöffnet. Jede nächste Seite wird geöffnet, wobei die Adressleiste wieder sichtbar ist. Welches Meta-Tag Sie auch immer in Ihren Seitenkopf einfügen ...

Joop Stringer
quelle
stackoverflow.com/questions/6429492/…
Alpha Codemonkey
1

Diese Site hat eine funktionierende Problemumgehung. Der gleiche Effekt verwendet Javascript, um das erste untergeordnete Div auf die Gesamthöhe des Ansichtsfensters festzulegen. http://webapp-net.com/Demo/Index.html

Xiatica
quelle
1

Es sieht so aus, als ob die meisten Antworten in diesem Thread nicht mithalten konnten. iOS Safari auf iPads bietet jetzt Vollbildunterstützung und ist mit Javascript sehr einfach zu implementieren.

Hier ist mein vollständiger Artikel zum Implementieren der Vollbildfunktion in Ihrer Web-App.

Marvin Danig
quelle