iOS 8: web posizione barra di stato app e problemi di ridimensionamento

Quando si impostano i meta tagiOS 8: web posizione barra di stato app e problemi di ridimensionamento

apple-mobile-web-app-capable

apple-mobile-web-app-status-bar-style

per creare uno schermo di web app pieno, la barra di stato di iOS è al parte superiore dello schermo (traslucido) e c'è un'ulteriore barra nera vuota nella parte inferiore.

Ecco il mio codice:

<!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>

C'è un ulteriore problema con il tag apple-mobile-web-app-status-bar-style. Dopo aver scattato e accettato una foto tramite l'ingresso della videocamera, vengono visualizzate delle barre nere ai lati dello schermo. Sto usando iOS8 GM su un iPad3.

Penso che questo potrebbe essere un bug di iOS 8 ma Apple non sembra preoccuparsi di mia segnalazione di bug :(

Qualcuno sa una soluzione/soluzione per questo problema

Update 1?: di Apple ha segnato la mia segnalazione di bug come duplicato (chiuso) su 19 settembre

Update 2:. bug è stato risolto in iOS 8.3 Beta 1

fonte

2014-09-17 aLiEnHeAd

Questo problema esisteva anche in iOS7. Credo che sia perché quando l'app photo-roll si apre (per scegliere un file), contiene del codice che imposta la barra su nero e sovrascrive le impostazioni dal metatag. Sfortunatamente non so come risolvere questo diverso dal premere il pulsante della schermata Home e rientrare nell'app dall'icona. – FunkyMonk91

@ FunkyMonk91 Non riesco a riprodurre questo problema sul mio iPad3 iOS7. Succede solo su iOS8. Btw. iOS8 GM è ora la finale di iOS8 :-( – aLiEnHeAd

Sicuramente non ho questo (esatto) problema su iOS 7. La prima cosa che ho visto oggi su iOS 8 appena installato su ipad. Inoltre alcune altre cose come gli eventi di scorrimento non funzionano più lungo, ma solo nella schermata iniziale, non nel normale browser. :-( – Garavani

Apple ha risolto questo bug in iOS 8.3 beta 1

fonte

2015-02-13 10:57:55 aLiEnHeAd

Il problema esisteva da iOS6. In precedenza avevo postato sul bug report di Apple con tutti i dettagli che fornisci oggi e in seguito è stato contrassegnato come duplicato. Questo è stato 2 anni fa e sfortunatamente oggi ho scoperto che è peggiorato.

Il bug report originale ha l'ID 11966202 ed è ancora (Aperto). Dato che hai lo stesso problema, l'unica cosa che potresti fare è confermare il bug che lo aumenterà e lo risolveranno in futuro.

Come ho già detto, sto cercando una soluzione in grado di dirti che non c'è soluzione. Il problema può essere riprodotto su tutti i dispositivi iOS, ma si comporta in modo diverso in base alle dimensioni e all'orientamento dello schermo.

Con iOS 8 ora si verifica un problema tecnico in cui il viewport diventa solo una piccola parte dello schermo e si chiude/si arresta completamente.

EDIT: Apple biglietteria è chiusa

A partire da Lunedi, Apple aveva chiuso il biglietto e posso confermare che l'uso 8.1 risolve finalmente i problemi della macchina fotografica e della barra di stato che ho avuto. Spero che risolve i vostri problemi di troppo :)

fonte

2014-09-18 08:14:49 HEDWIN

Ho notato che quando apri WebClip in modalità orizzontale, ottieni 20px extra di spazi bianchi nella parte inferiore dello schermo e non può essere riempito del tutto. Apple ha completamente infranto il comportamento della barra di stato nell'ultima versione di iOS. – Gapipro

Non è risolto per me utilizzando iPad mini e iOS 8.1. Le modalità orizzontale e verticale sono ancora interrotte. – andig

Il problema viene dal usando <meta name="apple-mobile-web-app-status-bar-style" content="black"> Al fine di sbarazzarsi di barra nera nella parte inferiore della vostra applicazione, è necessario utilizzare: <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> utilizza il nero-trasparente manterrà la vostra applicazione alla ricerca lo stesso sia in iOS7 che in iOS8. Dovrai comunque modificare i contenuti nella parte superiore della tua app per cancellare le icone della barra di stato di iOS.

fonte

2014-09-22 13:21:27 DrumJammer

Inoltre, ho omesso di menzionare che, affinché questa soluzione abbia effetto, è necessario eliminare l'app Web dalla schermata Home e aggiungerla di nuovo. – DrumJammer

Grazie per questo suggerimento. Almeno la barra nera in basso è scomparsa. Eppure ora ho una barra di stato trasparente nella parte superiore che non mi piace. O nero o niente bar. Ma quello trasparente mi fa schifo. Mi chiedo perché ogni nuova versione del software, invece di mantenere le cose buone e sviluppare quelle cattive, porti sempre un sacco di nuovi problemi invisibili dove non ce n'erano prima? Mi fa ammalare. Per non parlare del pessimo Safari 7.1 che è uscito con questo aggiornamento ... – Garavani

Basta aggiungere un alto div 20px alla parte superiore della vostra app e lasciare che agiscono come quella barra di stato

fonte

2014-09-22 15:11:32

:) hahaha Ho aspettato questa risposta! Grande. – Garavani

L'aggiunta di div 20px in alto non aiuta perché all'avvio dell'app in modalità orizzontale si ottiene una finestra rotta con 20px di spazio vuoto nella parte inferiore dello schermo che non può essere riempita con nulla. Quindi se hai un menu in fondo fisso fluttuerà nello spazio con la barra bianca sotto di esso. – Gapipro

mela-mobile-web-app-status-bar in stile non è attiva in iOS 8. Se si aggiungere un div fissa sulla parte superiore, solo aggiungerlo per OS 8_0

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

fonte

2014-09-23 16:27:22 Dux

nota che questo controllo non funziona per 8.1 ... meglio usare un parser di user agent e verificare la versione> = 8 (fino a quando questo non viene risolto - se mai) – captainclam

Ad ampliare tutto quanto sopra, la mia soluzione è:

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

quindi creare un CSS personalizzato per tutti gli elementi che devi spostarti di 20px, in particolare ogni position: fixed; top: 0px; esistente nel tuo CSS per la normale visualizzazione del browser [desktop/mobile].

Aggiungere il CSS personalizzato nella sezione head, sotto i collegamenti CSS con il seguente script [il mio esempio di lavoro]

<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>

Il mio risultato è vista sito desktop/browser mobile è come normale, poi il sito aggiunto alla casa schermo come app Web, all'avvio si apre a schermo intero, con barra di stato simile a pre ios8 [fyi, ho aggiunto un colore di sfondo del nero al mio css intestazione fisso per la barra di stato da mostrare come sfondo nero

Testato su iPad/iPhone/iPod con ios 8.0.2 - tutto bene. FYI, testato sul vecchio iPod ios 6.1.6 aspettandomi uno spostamento extra di 20px e non c'era - bonus!

fonte

2014-10-01 23:48:06 user1762289

puoi fare un js fiddle che include il tuo css? – Janey

Tecnicamente questa non è una risposta alla tua domanda, ma ho documentato le mie scoperte mentre cercavo di risolvere il problema da solo, ed ecco quello che ho trovato finora. Stavo per pubblicarlo come se fosse una sua domanda, ma ho pensato che sarebbe stato chiuso come un duplicato.

Sui dispositivi iOS8 con applicazioni Web bloccate. Per quanto riguarda il tag:

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

Da the Apple developer reference:

Se il contenuto è impostato di default, la barra di stato appare normale. Se impostato su nero, la barra di stato ha uno sfondo nero. Se impostato su nero-traslucido, la barra di stato è nera e traslucida. Se impostato su predefinito o nero, il contenuto Web viene visualizzato sotto la barra di stato. Se impostato su nero-traslucido, il contenuto Web viene visualizzato su tutto lo schermo, parzialmente oscurato dalla barra di stato. Il valore predefinito è predefinito.

Per abilitare questa funzionalità, è necessario utilizzare

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

In iOS6 e 7 questo funziona più o meno come previsto.

In iOS8 questo sembra essere completamente rotto. Ad esempio, iOS 8.0.2 in esecuzione su un aereo iPad in verticale ha il seguente comportamento:

black risultati in uno sfondo trasparente.C'è una barra nera nella parte inferiore dello schermo
default o non impostare un valore si traduce in uno sfondo trasparente e un solido bianco barra nella parte inferiore dello schermo
black-translucent risultati in uno sfondo trasparente, ma nessuna barra fastidioso nella parte inferiore dello schermo

In tutti i casi, appare il contenuto "sotto" la barra. cioè la barra non spinge il contenuto verso il basso.

Su un iPhone6, la barra di stato non viene visualizzata affatto in orizzontale. Nel ritratto tuttavia, il seguente comportamento:

black funziona come previsto, e il contenuto viene spinto verso il basso (wow !!!)
default ha una barra bianca vuota le migliori
black-translucent risultati in modo trasparente sfondo, con un contenuto sotto

non ho avuto la possibilità di provare su un iPhone6 +

iOS s l'imulator in xcode non sembra dare una riproduzione affidabile del comportamento che si verifica sui dispositivi reali.

Ho provato a cambiarlo in modo dinamico con javascript, ma sembra non avere alcun effetto.

Solo per rendere ancora più interessante/frustrante, è possibile COVER la barra di stato (orologio/wifi ecc.) Impostando gli stili sull'elemento html. per esempio.

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

Lo stesso problema documentato altrove:

https://discussions.apple.com/thread/6557230?start=0&tstart=0

fonte

2014-10-08 00:37:49 captainclam

Grazie per la correzione dettagliata. Sto avendo questi stessi problemi con un iPad Air in modalità orizzontale. – theabraham

Questo mi sta facendo impazzire. – Mati

Vale la pena notare che l'impostazione dello stile barra di stato per 'black' funziona come previsto finché si apre l'app Web con l'iPad in Portrait. Quindi anche se si ruota l'iPad, la barra nera è correttamente visibile.

Il problema è solo quando si accede all'app Web in orizzontale, almeno per me. Sto usando iPad 3 con IOS 8.1, e credo che sia sempre lo stesso in 8.3

fonte

2015-02-26 14:04:32 Sebris87

iOS 8: web posizione barra di stato app e problemi di ridimensionamento

risposta

Problemi correlati