Comment cacher la barre d'adresse sur iPhone?

Il suffit de toucher cela moi-même, si la barre d'adresse ne se cache pas, la raison peut être que la page n'est pas assez longue pour défiler.

Quand le

 window.scrollTo(0,1) 

S'appelle la page DOIT être plus long que la fenêtre afin qu'un événement de défilement puisse se produire. Ce n'est que lorsque le défilement se produira que le safari mobile cachera la barre d'adresse.

À moins que quelque chose n'ait changé dans les versions récentes d'iOS, le trick down down est le seul qui fonctionne de manière fiable, je n'ai eu aucun problème avec cette version :

 /mobile/i.test(navigator.userAgent) && !location.hash && setTimeout(function() { window.scrollTo(0, 1); }, 1000);​ 

Je ne me souciais pas de toute autre plate-forme mobile pour cette page particulière, mais il était en train de rediriger en fonction de l'agent … vous voudrez peut-être changer le regex pour vérifier spécifiquement l'iPhone, par exemple, remplacer /mobile/ avec /iPhone/ .

Je pense que cette version est en fait meilleure. Il teste pour voir si l'utilisateur a déjà commencé le défilement, ce qui est un problème que j'ai remarqué dans mon projet mobile.

 /Mobile/.test(navigator.userAgent) && !location.hash && setTimeout(function () { if (!pageYOffset) window.scrollTo(0, 1); }, 1000); 

MISE À JOUR: Apple a supprimé le support pour minimal-ui dans iOS 8, donc ce n'est plus une réponse utile 🙁

Pour les nouveaux googlers qui recherchent ceci: à partir d' iOS 7.1, il existe un nouveau mode minimal-ui qui fonctionne sur le Safari mobile:

Il est activé en définissant la propriété minimal-ui sur la fenêtre:

 <meta name="viewport" content="minimal-ui"> 

Vous pouvez également l'utiliser en conjonction avec d'autres propriétés comme:

 <meta name="viewport" content="width=device-width, minimal-ui"> 

Il est à noter qu'il n'y a pas d'exigence minimale de longueur de contenu car il existe avec le scrollTo hack. Il y a un excellent aperçu de ce nouveau mode ici . (C'est d'où vient l'image ci-dessus.) Il répertorie également certaines lacunes.

La seule documentation officielle que je pourrais trouver sur cette note est une note dans les notes de version iOS 7.1 d'Apple :

Une propriété, minimum-ui, a été ajoutée pour la clé de balise de la fenêtre de visualisation qui permet de minimiser les barres supérieure et inférieure de l'iPhone lorsque la page est chargée. Alors que sur une page utilisant minimal-ui, toucher la barre supérieure ramène les barres. Retourner dans le contenu les rejette à nouveau.

Par exemple, utilisez <meta name="viewport" content="width=1024, minimal-ui”> .

Bien sûr, comme cela ne fonctionne que dans iOS 7.1 et versions ultérieures , son utilité peut être limitée.

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

IPhone Configuration des applications Web

Je sais que ce fil commence à vieillir, mais si vous êtes venu chercher des réponses, essayez:

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

Si vous utilisez jQuery, mettez à la fin de $(document).ready(); Le délai d'attente permet au navigateur de déterminer la hauteur de la page …

Vous pouvez exécuter la fonction lorsque le contenu du site est prêt au lieu d'utiliser le délai d'attente

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

Je sais que c'est un ancien message, mais pour répondre à la question, je pense que cela ne sera jamais résolu à moins que le contenu soit> plus que la fenêtre Brower.

Voici un code qui cachera l'URL sur la charge, sur le changement d'orientation et sur une démarche tactile (le démarrage tactile ne doit être utilisé que si vous avez une URL cachée persistante, qui est toute une autre possibilité de vers, si vous ne le faites pas, Supprimer cette partie du script).

 if( !window.location.hash && window.addEventListener ){ window.addEventListener( "load",function() { setTimeout(function(){ window.scrollTo(0, 0); }, 0); }); window.addEventListener( "orientationchange",function() { setTimeout(function(){ window.scrollTo(0, 0); }, 0); }); window.addEventListener( "touchstart",function() { setTimeout(function(){ window.scrollTo(0, 0); }, 0); }); }