webentwicklung-frage-antwort-db.com.de

Komponenten der Safari-Benutzeroberfläche auf dem iPhone ausblenden

Bei dem Versuch, die Safari-UI-Komponenten für eine Web-App zu verbergen, die als Homescreen-Symbol gekennzeichnet ist. Ich verwende dieses Meta-Tag

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

wie auf iPhone Dev Center angegeben, aber die Adressleiste und die Symbolleiste sind beim Start über das Startbildschirmsymbol immer noch vorhanden. Was muss ich anders machen? Hat jemand ein Beispiel?

21
window.top.scrollTo(0, 1);

Funktioniert auf dem iPhone, aber nicht auf dem iPad. Ich habe erfolgreich die Browser-Komponenten auf dem iPad (also vermutlich überall) versteckt, indem ich verwendet habe

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

und über einen Startbildschirm-Link starten. Ich benutze auch

<meta name="viewport" 
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Ich habe nicht versucht, festzustellen, ob die Browserkomponenten noch ausgeblendet sind, wenn ich die Eigenschaften des Ansichtsfensters weglasse.

30
Steve Jorgensen

Wird es vom Startbildschirm aus gestartet? Die Dokumentation auf der verlinkten Seite erwähnt nicht, aber ich fand dieses @ Konfigurieren von Webanwendungen :

Sie können beispielsweise ein Symbol für Ihre Webanwendung angeben, das verwendet wird, um es beim Hinzufügen zum Startbildschirm darzustellen, wie unter „Angeben eines Webseiten-Symbols für den Webclip“ beschrieben. Sie können die Benutzeroberfläche von Safari auf dem iPhone auch minimieren, wie unter „Ändern der Darstellung der Statusleiste“ und „Ausblenden von Safari-Benutzeroberflächenkomponenten“ beschrieben, wenn Ihre Webanwendung über den Startbildschirm gestartet wird. Dies sind alles optionale Einstellungen, die beim Hinzufügen zu Ihrem Webinhalt von anderen Plattformen ignoriert werden

7
crashmstr

Haben Sie versucht, hinzuzufügen ...

<meta name="Apple-touch-fullscreen" content="yes" />
6
Benoit

Soweit ich weiß, achtet iOS nur dann auf die Flags, wenn Sie die App tatsächlich hinzufügen. Wenn das Apple-Mobile-Web-App-fähige Ding zunächst nicht funktioniert, löschen Sie Ihre App vom Startbildschirm und fügen Sie sie erneut hinzu.

Ich habe einige Experimente durchgeführt und festgestellt:

  • die Position des Meta-Tags in den Headern scheint keine Rolle zu spielen (ich dachte, es könnte sein!)
  • wenn Sie nach dem Hinzufügen der App und dem korrekten Entfernen der Adressleiste die Metatags von der Webseite entfernen, wird die Symbolleiste von iOS weiterhin entfernt.
  • auch nach dem Neustart des Geräts merkt es sich, ob die Symbolleiste entfernt werden soll. Die einzige Möglichkeit, dieses Verhalten zurückzusetzen, besteht darin, die App zu entfernen und erneut hinzuzufügen.

Hoffentlich hilft das!

3
Andrew

Ich weiß, dass dies ziemlich alt ist, aber ich bin darauf gestoßen, als ich nach einer Lösung gesucht habe. Ich konnte dieses Problem beheben, indem ich Folgendes hinzufügte:

window.top.scrollTo(0, 1);

auf die Onload-Methode des Körpers. Hoffe, es hilft allen anderen, die darauf stoßen.

2
mbxtr
1
Toby

Versuche dies

<meta name="Apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width; user-scalable=0;">
<meta name="Apple-mobile-web-app-status-bar-style" content="black">
<link rel="Apple-touch-icon" href="icon.png">
1
Pierre

Es gibt eine neue Direktive namens "minimal-ui", die der iOS-Browser berücksichtigt (zumindest auf dem iPhone, auf dem ich getestet habe). Symbolleisten werden ausgeblendet, bis der Benutzer auf die Statusleiste oben klickt. Sehr schön für eine Seite Apps!

Hier ist das Snippet, das ich benutze:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">

1
Cristian Dinu

Seit iOS 7.1 können Sie minimal-ui verwenden.

<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
0
B.Asselin
<meta name="Apple-mobile-web-app-capable" content="yes" />

Dies funktioniert, wenn:

  1. Das Tag ist vorhanden, wenn die App zum Startbildschirm hinzugefügt wird.
  2. Die App wird vom Startbildschirm aus gestartet.
0
Samuel Lindblom

alle oben genannten Meta-Tags und window.scrollTo funktionierten für mich nicht auf dem iPad. Ich habe eine Schaltfläche auf Safari neben den Lesezeichen gefunden, auf der die Option "Zum Startbildschirm hinzufügen" angezeigt wird. Es wird ein neues Kachelsymbol erstellt, und Sie können Ihr Symbol starten Web-App wie eine native App und keine Adressleiste.

0
jsDebugger
<meta name="Apple-mobile-web-app-capable" content="yes" />

funktioniert mit iOS6 + Mobile Safari Browser, aber NUR, wenn Sie die Seite zu Ihrem Homescreen hinzugefügt haben, NACHDEM Sie das Meta-Tag in Ihre Site aufgenommen haben.

0
Charles Ingalls

Das sollte sich ja wie erwartet verhalten, ich habe es in der Vergangenheit ohne Schwierigkeiten genutzt.

0
wisequark