schermata di avvio dell'app Web per iPhone

Question

Sto lavorando a un'app per iPhone in cui utilizzo il metatag "compatibile con app per dispositivi mobili apple-mobile" per ottenere la "modalità a schermo intero". Quando apro l'app, mostra un'immagine della pagina in cui ho lasciato l'ultima volta mentre carica. Sembra che l'app sia pronta a ricevere input quando non lo è, e questo è fonte di confusione.

È possibile modificare il comportamento predefinito e mostrare uno schermo vuoto finché non è pronto per ricevere l'input?

Answer 1

PUT tra i tag HEAD:

<link rel="apple-touch-startup-image" href="image.jpg"> 

L'immagine utilizzata deve essere in formato JPG o PNG, con una risoluzione di 320x460

Answer 2

L'immagine deve essere PNG e 320x460 questo funziona solo in iPhone OS 3.0 o più alto.

Answer 3

DEVE essere 320x460, NON funzionerà se è 320x480.

Answer 4

Questo aggiungerà una schermata iniziale alla tua app Web. Di seguito sono riportate le dimensioni necessarie per iPad (retina e non), iPhone/iPod Touch (retina e non) e iPhone 5. Includono anche l'area della barra di stato.

Apple Docs-Launch Images, Apple Docs-Icon and Image Sizes

<!-- iPhone (Retina) --> 
<link href="http://www.example.com/mobile/images/apple-startup-iPhone-RETINA.jpg" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> 

<!-- iPhone 5 --> 
<link href="http://www.example.com/mobile/images/apple-startup-iPhone-Tall-RETINA.jpg" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> 

<!-- iPad Portrait --> 
<link href="http://www.example.com/mobile/images/apple-startup-iPad-Portrait.jpg" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image"> 

<!-- iPad Landscape --> 
<link href="http://www.example.com/mobile/images/apple-startup-iPad-Landscape.jpg" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image"> 

<!-- iPad Portrait (Retina) --> 
<link href="http://www.example.com/mobile/images/apple-startup-iPad-RETINA-Portrait.jpg" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> 

<!-- iPad Landscape (Retina) --> 
<link href="http://www.example.com/mobile/images/apple-startup-iPad-RETINA-Landscape.jpg" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> 

Se la creazione di una web app per la compatibilità iPad è consigliabile che sia paesaggio e le dimensioni Portrait vengono utilizzati.