it-swarm.com.de

iOS 8: Position der Web-App-Statusleiste und Größenänderungsprobleme

Beim Einstellen der Metatags

Apple-mobile-web-app-capable

und

Apple-mobile-web-app-status-bar-style

um eine Vollbild-Web-App zu erstellen, befindet sich die iOS-Statusleiste am oberen Rand des Bildschirms (durchscheinend) und am unteren Rand befindet sich eine zusätzliche schwarze Leiste.

Hier ist mein Code:

<!DOCTYPE html><html><head><meta charset="utf-8">
<meta name="Apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta name="Apple-touch-fullscreen" content="yes">
<meta name="Apple-mobile-web-app-status-bar-style" content="black">
</head>
<body><h1>Test</h1>
<p>Capture a photo using camera</p>
<input type="file" capture="camera" accept="image/*">
</body></html>

Es gibt ein weiteres Problem mit dem Tag Apple-mobile-web-app-status-bar-style. Nachdem Sie ein Foto über die Kamera aufgenommen und akzeptiert haben, erscheinen schwarze Balken an den Seiten des Bildschirms ... Ich verwende iOS8 GM auf einem iPad3.

Ich denke, das könnte ein iOS 8-Fehler sein, aber Apple scheint sich nicht für meinen Fehlerbericht zu interessieren :(

Kennt jemand eine Lösung/Problemumgehung für dieses Problem?

Update 1: Apple hat meinen Fehlerbericht am 19. September als Duplicate (Closed) markiert.

Update 2: Fehler in iOS 8.3 Beta 1 behoben

39
aLiEnHeAd

Apple hat diesen Fehler in iOS 8.3 Beta 1 behoben

3
aLiEnHeAd

Technisch ist dies keine Antwort auf Ihre Frage, aber ich habe meine Ergebnisse dokumentiert, als ich versuchte, dieses Problem selbst zu lösen. Ich wollte es als eigene Frage posten, dachte aber, es wäre als Duplikat geschlossen.

Auf iOS8-Geräten, auf denen gepinnte Webanwendungen ausgeführt werden. Bezüglich des Tags:

<meta name="Apple-mobile-web-app-status-bar-style" content="black">

Von der Apple-Entwicklerreferenz :

Wenn der Inhalt auf Standard gesetzt ist, erscheint die Statusleiste normal. Bei Schwarz ist die Statusleiste schwarz hinterlegt. Wenn Schwarz durchscheinend eingestellt ist, ist die Statusleiste schwarz und durchscheinend. Bei der Einstellung default oder black wird der Webinhalt unterhalb der Statusleiste angezeigt. Bei Schwarz-Transparent wird der Webinhalt auf dem gesamten Bildschirm angezeigt, teilweise durch die Statusleiste verdeckt. Der Standardwert ist Standard.

Um diese Funktion zu aktivieren, müssen Sie verwenden

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

In iOS6 und 7 funktioniert das mehr oder weniger wie erwartet.

In iOS8 scheint dies völlig kaputt zu sein. Beispielsweise hat iOS 8.0.2, das auf einem iPad Air im Hochformat ausgeführt wird, folgendes Verhalten:

  • black ergibt einen transparenten Hintergrund. Am unteren Bildschirmrand befindet sich ein schwarzer Balken
  • default oder das Setzen eines Werts führt zu einem transparenten Hintergrund und einer durchgehenden weißen Leiste am unteren Bildschirmrand
  • black-translucent führt zu einem transparenten Hintergrund, jedoch ohne störende Balken am unteren Bildschirmrand

In allen Fällen wird der Inhalt "unterhalb" der Leiste angezeigt. die Leiste drückt den Inhalt nicht nach unten.

Auf einem iPhone6 ​​wird die Statusleiste im Querformat überhaupt nicht angezeigt. Im Portrait jedoch folgendes Verhalten:

  • black funktioniert wie erwartet und der Inhalt wird gedrückt (wow !!!)
  • default hat oben einen leeren weißen Balken
  • black-translucent ergibt einen transparenten Hintergrund mit darunterliegendem Inhalt

Ich hatte noch keine Gelegenheit, ein iPhone6 ​​+ zu testen

Der iOS-Simulator in xcode scheint keine zuverlässige Wiedergabe des Verhaltens realer Geräte zu geben.

Ich habe versucht, es dynamisch mit Javascript zu ändern, aber es scheint keine Wirkung zu haben.

Um dies noch interessanter/frustrierender zu gestalten, können Sie die Statusleiste (Uhr/WLAN usw.) überdecken, indem Sie Stile im HTML-Element festlegen. z.B.

  html {background: black;}
  body {background: #DDD; margin-top: 20px}

Dasselbe Problem an anderer Stelle dokumentiert:

35
captainclam

Das Problem bestand seit iOS6 . Ich hatte zuvor in Apples Fehlerbericht alle Details veröffentlicht, die Sie heute angeben, und wurde später als Duplikat markiert. Das war vor 2 Jahren und leider habe ich heute festgestellt, dass es noch schlimmer wurde.

Der ursprüngliche Fehlerbericht hat die ID 11966202 und ist immer noch (Open) . Da Sie das gleiche Problem haben, können Sie nur den Fehler bestätigen, der es eskaliert, und sie werden es in Zukunft beheben.

Wie gesagt, ich suche nach einer Lösung für mehr als genug, um Ihnen mitzuteilen, dass es keine Problemumgehung gibt .. Das Problem kann auf allen iOS-Geräten reproduziert werden, verhält sich jedoch je nach Bildschirmgröße und Ausrichtung unterschiedlich.

Mit iOS 8 haben wir jetzt einen Fehler, bei dem der Darstellungsbereich nur einen sehr kleinen Teil des Bildschirms ausmacht und vollständig schließt/abstürzt.

BEARBEITEN: Apple Ticket ist jetzt geschlossen

Ab Montag hatte Apple das Ticket geschlossen und ich kann bestätigen, dass mit 8.1 die Probleme mit der Kamera und der Statusleiste behoben werden. Hoffe, dass es auch deine Probleme gelöst hat :)

7
HEDWIN

Das Problem entsteht durch die Verwendung von <meta name="Apple-mobile-web-app-status-bar-style" content="black">Um den schwarzen Balken unten in Ihrer App zu entfernen, müssen Sie Folgendes verwenden: <meta name="Apple-mobile-web-app-status-bar-style" content="black-translucent"> Durch die Verwendung von black-translucent bleibt Ihre App in iOS7 und iOS8 gleich. Sie müssen immer noch den Inhalt oben in Ihrer App anpassen, um die Symbole der iOS-Statusleiste zu löschen.

5
DrumJammer

Um all dies zu erweitern, lautet meine Lösung:

<meta name="Apple-mobile-web-app-status-bar-style" content="black-translucent" />

Erstellen Sie anschließend ein benutzerdefiniertes CSS für alle Elemente, die um 20 Pixel nach unten verschoben werden müssen, insbesondere für jeden position: fixed; top: 0px;, der in Ihrem CSS für die normale Browseransicht [Desktop/Mobile] vorhanden ist.

Fügen Sie das benutzerdefinierte CSS in den Head-Abschnitt ein, unter den CSS-Links mit dem folgenden Skript [mein Arbeitsbeispiel].

<script type="text/javascript">
   if (window.navigator.standalone) {
       document.write("<link type=\"text\/css\" rel=\"stylesheet\" media=\"all\" href=\"assets/css/style-body-ios8.css\" charset=\"utf-8\" \/>");
}
</script>

Mein Ergebnis ist, dass der Desktop-/Mobilbrowser-Websiteansicht wie üblich ist. Dann wurde die Website als Web-App auf dem Startbildschirm hinzugefügt. Beim Start wird der Vollbildmodus geöffnet. Die Statusleiste sieht so aus, als ob sie vor ios8 verwendet wurde Mein fixer Header-CSS für die Statusleiste wird als schwarzer Hintergrund angezeigt

Getestet auf iPad/iPhone/iPod mit iOS 8.0.2 - alles gut. FYI, getestet auf dem alten iPod ios 6.1.6, der ein zusätzliches Downdown von 20px erwartet und nicht dabei war - Bonus!

2
user1762289

Es ist erwähnenswert, dass das Festlegen des Statusleisten-Status 'Schwarz' wie erwartet funktioniert, solange Sie die Web-App mit Ihrem iPad in Portrait öffnen. Auch wenn Sie das iPad drehen, ist der schwarze Balken korrekt sichtbar.

Das Problem ist nur bei der Eingabe der Web-App im Querformat, zumindest für mich. Ich verwende iPad 3 mit IOS 8.1, und ich glaube, dass es in 8.3 immer noch dasselbe ist

1
Sebris87

Fügen Sie einfach einen 20px hohen Div an die Spitze Ihrer App und lassen Sie das als Statusleiste fungieren

0

Status der Apple-Mobile-Web-App-Statusleiste ist in iOS 8 inaktiv. Wenn Sie ein festes Div hinzufügen, fügen Sie es nur für OS 8_0 hinzu

if (navigator.appVersion.indexOf("OS 8_0 like Mac") > 0) ...
0
Dux