Masquage de la barre d'adresse dans l'application Web mobile

Question

Je crée une application Web mobile (non native) et je souhaite utiliser la hauteur d'écran complète pour mon application. Le problème est que la barre d'adresse du navigateur prend beaucoup de place, me laissant avec environ 4/5 de l'ensemble de l'écran.

J'ai fait mon application pour qu'il n'y ait jamais de défilement, le site correspond toujours à la hauteur de l'écran de l'utilisateur. Ce que je suis vraiment après, c'est ce que fait le site mobile facebook. Il défile vers le bas pour masquer la barre d'adresse.

Existe-t-il un moyen universel de le faire, aussi bien pour les appareils Android que pour Iphone, et dans différents navigateurs mobiles (différentes tailles de barre d'adresse)?

BTW: J'utilise Iscroll4 pour obtenir un pied de page fixe et un en-tête.

EDIT: C'est le code que j'ai fini avec. J'ai ajouté deux boutons pour permettre à l'utilisateur de choisir d'utiliser ou non le mode plein écran. Ce code fonctionne en combinaison avec Iscroll4 et Jquery.

<script type="text/javascript"> 
$(document).ready(function() { 
    var fullscreen = false; 

    if(fullscreen==false) 
    { 
     window.removeEventListener("orientationchange", function(){ hideAddressBar(); }); 
     window.addEventListener("orientationchange", function(){ showAddressBar(); }); 
    } 
    else 
    { 
     window.removeEventListener("orientationchange", function(){ showAddressBar(); }); 
     window.addEventListener("orientationchange", function(){ hideAddressBar(); }); 
    } 

    $('#fullscreen').click(function(){ 
     hideAddressBar(); 
     fullscreen = true; 
    }); 
    $('#normalscreen').click(function(){ 
     showAddressBar(); 
     fullscreen = false; 
    }); 

}); 
function hideAddressBar() 
{ 
    document.body.style.height = (window.outerHeight + 20) + 'px'; 
    window.scrollTo(0, 1); 
} 
function showAddressBar() 
{ 
    document.body.style.height = (window.outerHeight - 20) + 'px'; 
    window.scrollTo(0, 0); 
} 

Answer 1

Vous pouvez trouver un bon article sur la façon dont cela est réalisé ici http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/

échantillon script

function hideAddressBar() 
{ 
    if(!window.location.hash) 
    { 
     if(document.height < window.outerHeight) 
     { 
      document.body.style.height = (window.outerHeight + 50) + 'px'; 
     } 

     setTimeout(function(){ window.scrollTo(0, 1); }, 50); 
    } 
} 

window.addEventListener("load", function(){ if(!window.pageYOffset){ hideAddressBar(); } }); 
window.addEventListener("orientationchange", hideAddressBar); 

Answer 2

La façon dont je fais ce qui est habituellement:

window.addEventListener("load",function() { 
    setTimeout(function(){ 
    window.scrollTo(0, 1); 
    }, 0); 
}); 

Mais il ne fonctionnera que si la page est assez long pour faire défiler vers le bas un peu.

Answer 3

Le "défiler vers le bas" javascript astuce devrait fonctionner sur iPhone et Android:

http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/

ne suis pas sûr d'autres navigateurs mobiles quoique désolé. Parlez-vous de Blackberry, Windows Phone, etc. ou des téléphones plus basiques?

Answer 4

Essayez ceci,

pour Android:

if(navigator.userAgent.match(/Android/i)){ 
    window.scrollTo(0,1); 
} 

pour iPhone:

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