Evitare iPad web app dal mostrare la barra degli indirizzi di Safari

Ho una web app in esecuzione su Safari su iPad. Sto iniziando l’app dall’iPad home page. Voglio l’app per avviare in modalità a schermo intero, e di continuare a funzionare in modalità a schermo intero (cioè non mostra la barra degli indirizzi di Safari). Ho quindi aggiunto il seguente meta-tag per la pagina master del sito:

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="width=device-width">

Avvio l’app dall’iPad home page e si inizia bene in modalità a schermo intero (non mostra la barra degli indirizzi di Safari) ma quando clicco su un altra pagina del sito (con la stessa meta-tag, come ereditata dalla stessa pagina master del sito) l’indirizzo di bar si apre improvvisamente in vista (e rimane a vista). Il link si presenta come segue (sto usando jQueryMobile):

<a href="/Home" data-ajax="false">Home</a>

Come posso forzare la web app per rimanere guardando come un ‘nativo-app’, mantenendo la barra degli indirizzi nascosti durante la navigazione tra le pagine interne?

OriginaleL’autore Journeyman | 2011-06-01

3 Replies
  1. 7

    Sembra che Safari Mobile non ‘nativamente’ di supporto a schermo intero se si utilizzano collegamenti esterni. Non appena si utilizza un ancoraggio html poi si ribalta fuori della modalità a schermo intero. La finestra.scrollTo può essere una soluzione che funziona per alcune persone, ma vorrei anche evitare che il modo in cui l’interfaccia utente ribalta quando la transizione verso il non-modalità a schermo intero.

    La risposta è utilizzare la finestra.posizione.assegnare(). Questo mantiene le app a tutto schermo in “nativa” per la modalità a schermo intero. Hai solo bisogno di rifattorizzare il tag in javascript window.posizione.assegnare(url) chiamate – che mantiene poi la cosa in full-screen.

    Sì, ma di brutto. Dispositivo di regolazione di altezza e di alcuni altri mediaqueries può anche girare le app a schermo intero, senza romperla, per gli altri browser.
    grazie per il commento. Stai dicendo che posso usare standard <a href=”bla”> link e non saltare fuori schermo intero? Se è così, quale dispositivo di altezza e altre impostazioni non ho bisogno, e si evita lo sgradevole pagina-swap effetto visivo?
    <meta name=”viewport” content=”width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no”> anche se questo sembra rompere il orientationchange su un ipod. Io non esplorare il soggetto.
    La mia tag è già all’interno dell’intestazione, ma su iOS 4.3.3 se si emette un <a href=”sample.htm”> link e poi salta fuori la modalità a schermo intero. Credo che jQueryMobile presenta anche questo comportamento se si utilizzano tali collegamenti esterni. L’unica soluzione che ho trovato è la finestra.posizione.assegnare(). Mi interessa perché si ritengono sgradevole, non è supportato da tutti i browser? – grazie per l’input.
    Ok, mi hai preso in trappola, prendo che indietro. 🙂 Semplicemente, non ho visto questa cosa in uso prima e ho pensato che non era cross-browser. Quindi non è che è brutto, ma rompe le JQM DOMcaching, che non è proprio bello.

    OriginaleL’autore Journeyman

  2. 5

    Aggiungere jQuery e non è necessario modificare tutti i collegamenti,

    $(document).ready(function(){
        $('a').click(function(event){
            event.preventDefault();
            window.location.assign($(this).attr('href'));
        });
    });

    Link esempio:

    <a href="nextpage.html">Next page without safari</a>
    E che cosa circa la cronologia del browser, in questo caso? Sarà memorizzare tutte le posizioni precedenti e Indietro pulsante funziona correttamente?
    Per i miei intenti e scopi, questa soluzione ha funzionato perfettamente
    Questo ha fatto il trucco per me..Grazie

    OriginaleL’autore Christoffer

  3. 2

    forse questo: fonte

    //When ready...
    window.addEventListener("load",function() {
        //Set a timeout...
        setTimeout(function(){
            //Hide the address bar!
            window.scrollTo(0, 1);
        }, 0);
    });
    Questo potrebbe funzionare per iOS Phone e Android browser, ma non funziona su iPad.

    OriginaleL’autore Phill Pafford

Lascia un commento