La schermata dell'app Web 8 di iOS si riduce dopo aver caricato l'app fotocamera

Question

Sono in procinto di creare un'app Web e ho riscontrato un problema con iOS 8. Si noti che questo è specifico per iOS 8 poiché funziona correttamente nelle versioni precedenti.

Ho una pagina che carica le immagini prese direttamente dal telefono o dal tablet. Io uso il seguente Link per richiamare l'applicazione fotocamera:

<input type="file" accept="image/*" capture="camera" name="files[]"> 

L'applicazione della fotocamera si apre come previsto e di scattare la foto senza alcun problema. Tuttavia, quando l'app della fotocamera si chiude e torna all'app Web, l'altezza dello schermo viene ridotta di oltre la metà. Non è possibile correggere l'aspettativa di chiusura e riavvio dell'app.

Si può vedere come appare dopo aver scattato la foto qui: Screencast

Sembra come se lo schermo rimane nel paesaggio. Tuttavia, la rotazione del dispositivo lo rende solo peggiore.

Suppongo che si tratti di un bug di iOS 8, ma mi chiedo se qualcuno ha qualche idea su come correggere o aggirare il problema.

Un'ultima nota, il problema si verifica solo quando si esegue come un'app Web. Quando si usa Safari funziona.

CRONACA - qui sono i meta tag che sto usando:

 <!-- Run in full-screen mode. --> 
     <meta name="apple-mobile-web-app-capable" content="yes"> 
     <meta name="mobile-web-app-capable" content="yes"> 

     <!-- Make the status bar black with white text. --> 
     <meta name="apple-mobile-web-app-status-bar-style" content="black"> 

     <!-- Customize home screen title. --> 
     <meta name="apple-mobile-web-app-title" content="DigiSite"> 

     <!-- Disable phone number detection. --> 
     <meta name="format-detection" content="telephone=no"> 

     <!-- Set viewport. --> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 

     <!-- Startup images --> 

     <!-- iOS 6 & 7 iPad (retina, portrait) --> 
     <link href="http://img.digisite.us/splash.png?w=1536&h=2008&c=<br /> 
<b>Notice</b>: Undefined index: background in <b>/home5/digisite/public_html/mobile/mobileHeader.php</b> on line <b>22</b><br /> 
&n=lumentum" 
     media="(device-width: 768px) and (device-height: 1024px) 
     and (orientation: portrait) 
     and (-webkit-device-pixel-ratio: 2)" 
     rel="apple-touch-startup-image"> 

     <!-- iOS 6 & 7 iPad (retina, landscape) --> 
     <link href="http://img.digisite.us/splash.png?w=1496&h=2048&c=&n=lumentum" 
     media="(device-width: 768px) and (device-height: 1024px) 
     and (orientation: landscape) 
     and (-webkit-device-pixel-ratio: 2)" 
     rel="apple-touch-startup-image"> 

     <!-- iOS 6 iPad (portrait) --> 
     <link href="http://img.digisite.us/splash.png?w=768&h=1004&c=&n=lumentum" 
     media="(device-width: 768px) and (device-height: 1024px) 
     and (orientation: portrait) 
     and (-webkit-device-pixel-ratio: 1)" 
     rel="apple-touch-startup-image"> 

     <!-- iOS 6 iPad (landscape) --> 
     <link href="http://img.digisite.us/splash.png?w=748&h=1024&c=&n=lumentum" 
     media="(device-width: 768px) and (device-height: 1024px) 
     and (orientation: landscape) 
     and (-webkit-device-pixel-ratio: 1)" 
     rel="apple-touch-startup-image"> 

     <!-- iOS 6 & 7 iPhone 5 --> 
     <link href="http://img.digisite.us/splash.png?w=640&h=1096&c=&n=lumentum" 
     media="(device-width: 320px) and (device-height: 568px) 
     and (-webkit-device-pixel-ratio: 2)" 
     rel="apple-touch-startup-image"> 

     <!-- iOS 6 & 7 iPhone (retina) --> 
     <link href="http://img.digisite.us/splash.png?w=640&h=920&c=&n=lumentum" 
     media="(device-width: 320px) and (device-height: 480px) 
     and (-webkit-device-pixel-ratio: 2)" 
     rel="apple-touch-startup-image"> 

Grazie in anticipo.

Answer 1

Sto vedendo lo stesso problema su iPad 2 con iOS8. Sembra avere a che fare con l'orientamento in cui apri la tua app. Se apriamo l'app in modalità verticale (verticale), allora passiamo a orizzontale (orizzontale) e funziona bene. Solo quando l'app viene aperta in orizzontale, il viewport si restringe.

Non sono stato in grado di riprodurre questo problema su iOS7.

Prima dell'acquisizione foto:

Dopo la cattura foto:

Answer 2

Ben, tu sei assolutamente corretto si tratta di un bug di iOS 8. Non riesco a determinare come aggirare a livello di programmazione. Se qualcun altro ha qualche idea, per favore sentiti libero di condividere. Ma c'è un modo per correggere manualmente.

Il problema sembra aggirare l'app della fotocamera che non identifica correttamente la posizione corretta. Sul mio iPhone, l'app fotocamera si apre sempre in modalità verticale anche se tenuta in posizione orizzontale. Se rilevi questo, continua semplicemente a ruotare il dispositivo finché non corregge automaticamente la posizione. Ci sono voluti due tentativi prima che si correggesse. Una volta nella giusta modalità, fai clic su "Usa foto" e tutto va bene. Quindi, come ha detto Ben, finché l'app web e l'app per fotocamera sono nello stesso orientamento, tutto andrà bene. Se non sono la tua app web-view, la porta sarà incasinata. Quando ciò si verifica, l'unica soluzione è chiudere l'app e riprovare. Un altro nodo interessante, si verifica solo quando si esegue un'app a schermo intero. Se corri attraverso un safari come qualsiasi altro sito web, non ci sono problemi.

Ho documentato i passaggi qui per assicurarsi che quanto detto sopra sia chiaro. http://screencast.com/t/1mwIur5Z8.

Spero che questo aiuti gli altri. Speriamo che Apple corregga questo.

Grazie Ben per aver inviato il difetto ad Apple!

Answer 3

Ho esattamente lo stesso problema. Ho aperto un bugreport nel bugtracker di Apple l'ago-6, ma nessuno si preoccupa: -/
Sembra avere qualcosa a che fare con

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

Se non si utilizza questo tag si dispone di una barra di stato di sovrapposizione , ma scattare foto non ridimensiona più la tua vista.

Edit:
esempio completa:

<!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"> 
    </head> 
    <body><h1>Test</h1> 
    <p>Capture a photo using camera</p> 
     <input type="file" capture="camera" accept="image/*"> 
    </body> 
</html> 

Answer 4

Apple ha risolto questo bug in iOS 8.3 beta 1