Navigationsleisten in Safari iOS 7 für iPhone / iPod touch können nicht ausgeblendet werden

Ich glaube nicht, dass es eine Lösung gibt, um Balken programmgesteuert mit Javascript / css / html auszublenden, aber lassen Sie mich versuchen, ein Problem zu beschreiben. Wir sind das Team von Entwicklern mobiler Spiele und entwickeln seit einem Jahr ein Spiel.

Nach der Ankündigung von iOS 7 haben wir das Problem, dass es UNMÖGLICH ist, die Navigationsleisten auszublenden. Sobald der Benutzer auf den oberen oder unteren Teil des Safari-Browsers tippt, werden wieder Navigationsleisten angezeigt, in denen alle Steuerelemente des Spiels ausgeblendet werden.

Die einzige Lösung, die wir bisher gefunden haben, besteht darin, den Benutzer zu zwingen:

1. Gerät drehen
2. Blättern Sie durch die Seite
3. Anwendung zum Startbildschirm hinzufügen

Keine dieser Alternativen ist akzeptabel. Apple ist sich dieses Problems anscheinend bewusst, ignoriert es jedoch weiterhin. Sie haben einen gemeldeten Fehler als Duplikat des Fehlers # 14076889 geschlossen.

Ich glaube, dass wir nicht das einzige Team sind, das das gleiche Problem hat. Kennt jemand die Lösung?

Update September 2014: iOS 8 hat die minimal-uiFunktion entfernt. Es gibt keine andere Möglichkeit, Navigationsleisten zu entfernen / auszublenden, als sich auf das Standardverhalten des Browsers zu verlassen (Balken werden beim Scrollen ausgeblendet, jedoch nur, wenn das Bildlaufelement das BODYder Seite ist). Die einzige "Problemumgehung" besteht darin, die App auf dem Homescreen zu speichern und die richtigen Meta-Tags festzulegen (siehe unten).

Update August 2014: iOS 8 (Beta) wird nicht mehr unterstütztminimal-ui . Es gibt keine Problemumgehung. (Der Grund dafür ist wahrscheinlich der Missbrauch durch Websites, die damit versucht haben, das Navigieren von Personen zu verhindern. Möglicherweise gibt es in iOS 8 Safari neue Funktionen, die noch nicht veröffentlicht wurden und diese ersetzen minimal-ui.)

iOS 7.1 hat eine neue API hinzugefügt, um dieses Problem zu lösen:

<meta name="viewport" content="minimal-ui">

Dieses neue Ansichtsfenster-Flag verbirgt standardmäßig die Safari-Benutzeroberfläche (nur eine kleine Titelleiste mit URL und SSL-Anzeige wird angezeigt). Um auf die Safari-Benutzeroberfläche zuzugreifen, müssen Benutzer aktiv auf diese Titelleiste tippen.

Beachten Sie, dass es unter iOS 7.0.x keine API oder bekannte Problemumgehung gibt . Wenn Sie in diesen Versionen das Browser-Chrome von Safari dauerhaft ausblenden möchten, müssen Sie den Benutzer entweder dazu bringen, die Web-App zum Startbildschirm hinzuzufügen (mit den entsprechenden Meta-Tags <meta name="apple-mobile-web-app-capable" content="yes">), oder einen nativen App-Wrapper wie Phonegap verwenden und über verteilen der App Store.

Ich persönlich wünschte, sie hätten die Schaltfläche "Vollbild", die sie im Querformat auf iOS 6 Mobile Safari eingeführt hatten, nicht entfernt. Dies war eine großartige Lösung, die Entwickler und Benutzer glücklich machte.

Ein perfekter Kandidat für eine dauerhaftere Lösung wäre, dass Mobile Safari die HTML5-Vollbild-API unterstützt (die unter Safari unter OS X unterstützt wird!). Leider gibt es derzeit keine Unterstützung und in der Vergangenheit haben iOS-Point-Releases keine neuen Safari-Funktionen hinzugefügt. Vielleicht ist das etwas für iOS 8.

UPDATE : Es gibt eine Meta-Eigenschaft, um dies derzeit in iOS7.1 Beta gemäß diesem Forumsbeitrag in den Versionshinweisen zu beheben .

<meta name="viewport" content="minimal-ui">

Ich habe einen Test durchgeführt und kann bestätigen, dass diese Funktion derzeit in Beta 2 ist.

HINWEIS : Die neue Minimal-UI-Option ist eine großartige Lösung, muss jedoch Teil der HTML-Antwort sein. Ich habe unter iOS7.1 Beta3 versucht, das Viewport-Meta-Tag an JS anzuhängen

$('head').append('<meta name="viewport" content="width=device-width, user-scalable=0, minimal-ui">');

Der Wert "minimal-ui" wird vom Browser ignoriert.

Update: iOS7.1 wurde jetzt veröffentlicht, sodass die NDA aufgehoben wurde.

<meta name="viewport" content="minimal-ui">

Ist in der Tat das richtige Tag und funktioniert in der Live-Veröffentlichung. Denken Sie daran, dass "Ansichtsfenster" bei Bedarf eine durch Kommas getrennte Liste unterstützen kann.

Ich kombiniere es mit anderen mobilen Variablen, damit sich die Website wie eine App anfühlt:

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

- -

Wir haben auch mit diesem gekämpft. Wir haben eine TabBar auf unserer Website und jedes Mal, wenn Sie versuchen, auf eine Tab-Safari zu klicken, werden Steuerelemente angezeigt.

Heute hoffe. Wenn Sie Mitglied des Apple-Entwicklerprogramms sind, empfehle ich dringend, dieses Forum zu besuchen: https://devforums.apple.com/message/927476

W.

EDIT 2:

Funktioniert nicht seit iOS 7.1

BEARBEITEN:

Einige Spiele haben eine Überlagerung übernommen, die den Spieler anweist, die Balken wegzuscrollen und dann das Scrollen zu sperren, bis die Balken wieder herausspringen. In diesem Fall position: fixedhilft es sehr, da es die Bewegung stabilisiert (kann es nicht besser erklären, muss es einfach selbst ausprobieren). Dieses Spiel ist ein gutes Beispiel für einen solchen Ansatz:

www.paf.com/mobile/launch/flowers.html (leider können nicht mehr als 2 Links gepostet werden)

Kürzlich bin ich auch auf einen Hack gestoßen, der das Auslösen der Navigationsleiste für das deaktiviert oberer Bereich. Alles, was Sie tun müssen, ist, Ihrem DOM ein zufälliges Element mit folgenden Stilen hinzuzufügen:

z-index: 100000; /* should be bigger than everything else */
position: fixed;
overflow: scroll;
-webkit-overflow-scrolling: touch;

Lesen Sie hier mehr darüber .

Wenn Sie eine Web-App erstellen, können Sie auf dem Startbildschirm einen Link zur URL erstellen. und verwenden Sie die folgenden HTML-Meta-Tags:

<!-- Allows fullscreen mode from the Homescreen -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- Sets the color of the text/battery, wireless icons etc -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">

Dadurch werden die Anzeigen über Ihrer Kopf- / Navigationsleiste überlagert. (Die Anzeigen, die Sie auf allen iPad-Bildschirmen sehen.

Weitere Informationen finden Sie unter: https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

Hoffentlich hilft das jemandem, aber ich wollte nicht die Breite meines Ansichtsfensters = Gerätebreite festlegen, da es auf dem iPhone 4 480 Pixel groß ist und ich möchte, dass mein Spiel für alle Geräte 800 Pixel groß ist.

Und wenn Sie es nicht einstellen, registriert sich minimal-ui nicht.

Meine Arbeit ist:

<meta name="viewport" content="width=device-width, minimal-ui">

Und dann das Ansichtsfenster ändern, sobald die Seite geladen ist:

  $(window).load(function(){
    $('meta[name=viewport]').attr('content','width=800, maximum-scale=1')
  });

Ich bin ziemlich schockiert, dass es funktioniert. Die Adressleiste und die unteren Schaltflächen der Benutzeroberfläche werden nur angezeigt, wenn der Benutzer oben / unten auf den Bildschirm klickt. Ich liebe es jetzt.

Diese Lösung funktionierte für mich, aber in meinem Fall war die Webanwendung für eine private Öffentlichkeit gedacht, bei der ich die Kontrolle über das verwendete iPad hatte.

Ich habe versucht, alle möglichen Meta-Tags und Hacks zu verwenden, und nachdem IOS8 die Minimal-UI-Funktion entfernt hatte, war es praktisch unmöglich, sie zu lösen.

Unser Team hat über den Tellerrand hinaus gedacht und eine gute Lösung gefunden:

Der Mercury-Browser wird im Vollbildmodus geöffnet, und selbst wenn Seiten aufgeladen werden, wird die Adressleiste nicht angezeigt. Es ist ein kleines Symbol unten rechts und nur :) Es hat perfekt für unser Problem funktioniert!

Aber ich wiederhole: Verwenden Sie es nicht, wenn Sie eine Webanwendung für die Öffentlichkeit im Allgemeinen entwickeln. Es ist schrecklich, dass UX Ihren Benutzer dazu zwingt, einen anderen Browser herunterzuladen, um auf die App zuzugreifen.

AKTUALISIEREN

Ein Entwicklerfreund von mir hat diese Lösung gefunden:

Verwenden Sie eine Webansicht in Titanium von Appcelerator. Es wird nicht im Apple Store zugelassen, aber für eine private Veranstaltung wird es gut funktionieren!