2010-10-06 24 views
7

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.Site web iPad plein écran dans Safari

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

+0

peu de chance de trouver un solution-- J'ai essayé plusieurs, rien works-- –

Répondre

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; 
       } 
      } 
     } 
    } 
} 
4

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

+0

Cela ne fonctionne pas l'homme. – Shrayas

+0

cela fonctionne pour moi, sur plusieurs projets. s'il vous plaît fournir plus de detials –

+0

fonctionne certainement. Placez simplement la fonction dans une fonction prête comme suit: $ (document) .ready (function() {$ .stayInWebApp();}); Je viens d'ajouter cela au script, donc je n'ai pas besoin d'inclure un autre fichier js. – Whiskey