Site web iPad plein écran dans Safari

Question

J'essaie d'obtenir un site qui fonctionne en plein écran pour toutes les pages, j'ai regardé ici: iPad WebApp Full Screen in Safari et suivi cela et ma page d'index remplit bien l'écran, mais chaque fois que je clique sur un lien vers un autre Même si cette page est configurée avec les balises Meta, elle remet la barre chromée et tout l'alignement disparaît.

Il doit y avoir un moyen ou est-ce une limitation de safari qui sera corrigé dans une révision ultérieure.

Answer 1

Vous pouvez essayer quelque chose comme ceci:

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

J'ai écrit un plugin jQuery à cette fin précise: https://github.com/mrmoses/jQuery.stayInWebApp

Inclure le plugin en quelque sorte, puis exécutez comme ceci:

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

Par défaut, il s'attachera à tous les éléments <a />. Vous pouvez passer un sélecteur différent pour l'attacher à des liens spécifiques. Par exemple, $.stayInWebApp('a.stay'); attachera à tous les liens qui ont class="stay"

Parce que ce si petit, j'ai l'habitude il suffit de copier la version minified dans l'un de mes autres fichiers javascript externes pour inclure, plutôt que d'avoir à ajouter une référence d'un autre externe.

Egalement disponible sur plugins.jquery.com