Sito web iPad a schermo intero in Safari

Question

Sto cercando di ottenere un sito Web che funziona a schermo intero per tutte le pagine, ho guardato qui: iPad WebApp Full Screen in Safari e ho seguito quello e la mia pagina di indice riempie lo schermo semplicemente bene, ma ogni volta che clicco un link ad un altro pagina anche se quella pagina è stata configurata con i meta tag, rimuove la barra di cromo e tutto l'allineamento si spegne.

Ci deve essere un modo o è una limitazione di safari che verrà corretta in una revisione successiva.

Answer 1

Si può provare qualcosa di simile:

if ((navigator.userAgent.indexOf('iPad') != -1)) { 
    // for standalone (app) fulscreen mode 
    if (window.innerHeight == 748 || window.innerHeight == 1004) { 
     var a = document.getElementsByTagName("a"); 
     for (var i = 0, len = a.length; i < len; i++) { 
      if (a[i].getAttribute("href");) { 
       a[i].onclick = function() { 
        window.location = this.getAttribute("href"); 
        return false; 
       } 
      } 
     } 
    } 
} 

Answer 2

Ho scritto un plugin jQuery per questo scopo esatto: https://github.com/mrmoses/jQuery.stayInWebApp

Includere il plugin in qualche modo, quindi eseguirlo in questo modo:

$(function() { 
    $.stayInWebApp(); 
}); 

Per impostazione predefinita si collegherà a tutti gli elementi <a />. È possibile passare un altro selettore per collegarlo a collegamenti specifici. Ad esempio, $.stayInWebApp('a.stay'); attribuirà a tutti i link che hanno class="stay"

perché è così piccolo, di solito basta copiare la versione minified in uno dei miei altri file JavaScript esterno per includere, piuttosto che dover aggiungere riferimento un'altra esterna js.

anche accessibile plugins.jquery.com