Utilizzando il meta tag Apple a schermo intero web app

Question

Sto cercando di utilizzare il tag

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

per arrivare iOS Safari per mostrare una pagina senza la roba del browser; almeno, questo è quello che I penso che dovrebbe fare per me. (Lo Apple documentation non entra nei dettagli.)

Finora, non riesco a farlo fare nulla. Here is a JSBin example. Con o senza il tag <meta>, la pagina viene visualizzata sia su un iPod Touch che su un iPad 2 con il browser in alto (e in basso sullo schermo piccolo).

C'è qualcos'altro che deve accadere per influenzare il browser? O le mie aspettative su come dovrebbe funzionare sono errate? (Si noti che, tramite weinre, ho controllato il flag "windows.navigator.standalone" e sembra essere false.)

Answer 1

Ciò che fa solo ciò che si desidera quando l'utente aggiunge un collegamento alla propria app al proprio schermo di casa.

Un approccio comune per il caso nel browser consiste nell'aggiungere una chiamata a window.scroll(0,1) che porterà il browser fuori dalla parte superiore dello schermo. (Non v'è alcun modo per cancellare la roba in basso.)

Inoltre, si potrebbe desiderare un tag per dire che non vuoi ridimensionamento:

<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, user-scalable=no, maximum-scale=1, minimum-scale=1" /> 

Answer 2

Quello che il meta tag fare è quando si visualizza la pagina in il browser, aggiunge un'opzione per aggiungere la tua pagina alla homescreen. Quando apri la pagina tramite la scorciatoia della schermata iniziale, sarà a schermo intero e navigator.standalone verrà impostato su true. Questo è ciò a cui le persone si riferiscono quando parlano della modalità a schermo intero.