Ist es möglich, die Adressleiste und die Statusleiste in iOS 7 Safari auszublenden?

12

Ist es möglich, die Adressleiste und die Statusleiste in iOS 7 auszublenden?

In einer Querformat-App verwende ich derzeit den folgenden Code, um dies für frühere iOS-Versionen zu tun, und er funktioniert auch unter iOS 7 gut: Beim Öffnen der Seite wird der Vollbildmodus aktiviert, und dies bleibt auch so.

JS:

window.addEventListener("load",function() {
    // Set a timeout...
    setTimeout(function(){
        // Hide the address bar!
        window.scrollTo(0, 1);
    }, 0);
});

HTML:

<!-- For iOS web apps -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="AMC Walking Dead Story Sync">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

Tatsache ist, dass auf iOS 7 iPhone und iPad beim Tippen auf den unteren Bildschirmrand die Adressleiste und die Statusleiste angezeigt werden. Sie können diese nur entfernen, indem Sie die Ausrichtung des Telefons ändern und anschließend wieder auf die vorherige Ausrichtung zurücksetzen. Gibt es überhaupt eine Möglichkeit, diese Manipulation zu vermeiden?

Svassr
quelle
Viele Antworten auf diese bereits stackoverflow.com/questions/18813476/…
AllInOne
Ich sehe keine Antwort auf SO, die besser funktioniert als der Beispielcode hier. Hmm ...
bmike

Antworten:

15

Es gibt eine Methode:<meta name="viewport" content="minimal-ui”>
( funktioniert aber nur unter iOS 7.1 - nicht unter 7.0 oder 8.0 )

Quelle: StackOverflow


Weitere Details aus iOS 7.1 Beta 2, Änderungsprotokoll und Versionshinweise :

Safari-Notizen

Für den Metatag-Schlüssel des Ansichtsfensters wurde die Eigenschaft "minimal-ui" hinzugefügt, mit der die oberen und unteren Balken auf dem iPhone beim Laden der Seite minimiert werden können. Wenn Sie auf einer Seite mit minimal-ui auf die obere Leiste tippen, werden die Leisten wieder angezeigt. Wenn Sie den Inhalt erneut antippen, werden sie wieder entlassen.

Verwenden Sie zum Beispiel <meta name=”viewport” content=”width=1024, minimal-ui”>.


Update: Ich habe bestätigt, dass diese Methode unter iOS 7.1 (offizielle endgültige Version) funktioniert. Sie können dies selbst mit meiner Web-App bestätigen , die die oben beschriebene Meta-Tag-Lösung verwendet.

Bildbeschreibung hier eingeben

Leftium
quelle
Ich warte auf die endgültige Veröffentlichung und versuche es dann. Dann akzeptiere ich deine Antwort. Danke vielmals.
Svassr
Hmmmm. Ich verwende 7.1.1 und Ihre oben verlinkte Web-App blendet die Adressleiste usw. beim Laden NICHT aus. Haben sie es in 7.1.1 gebrochen?
Brian B
7
Dies wurde in iOS8 entfernt.
Charlie Schliesser
1
Überprüfen Sie diesen Beitrag zur IOS8-Implementierung: stackoverflow.com/questions/24889100/…
svassr
1

Ich habe gesehen, dass dies empfohlen wird. <meta name="apple-mobile-web-app-capable" content="yes"> Die Site wird im Standalone-Modus ausgeführt, wodurch die Benutzeroberfläche ausgeblendet wird. Ich bin unklar, wie dies mit der oben genannten Minimal-UI-Lösung verglichen wird. Ich habe den Eindruck, dass diese Lösung auch für iOS-Versionen vor 7.1 funktioniert.

Tim
quelle
5
Diese Lösung funktioniert nur für Webseiten, die Sie Ihrem Startbildschirm als App hinzufügen.
Svassr