web-dev-qa-db-fra.com

Comment masquer la barre d'adresse sur iPhone?

Comment masquer la barre d'adresse sur iPhone?

J'ai essayé jusqu'à présent deux méthodes différentes:

  • Faire défiler un pixel avec JavaScript lors du chargement de la page

  • Et les balises META suivantes:

    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /><meta name="Apple-mobile-web-app-capable" content="yes" />

Aussi ceci:

<meta names="Apple-mobile-web-app-status-bar-style" content="black-translucent" />

Je suis complètement confus.

PS: Oh, j'ai oublié une chose vraiment importante: la page Web elle-même ne déborde pas la fenêtre du navigateur. C'est probablement la raison pour laquelle l'astuce de défilement 1 pixel ne fonctionne pas.

Je ne peux pas l'agrandir, car le truc sur le design, c'est que tout le monde peut défiler, mais cette page se plie ... :)

javascriptiphonehtmlcsssafari
27
Peter Szabo

Je viens de frapper moi-même. Si la barre d'adresse ne se cache pas, la raison peut être simplement que la page n'est pas assez longue pour défiler.

Quand le

window.scrollTo(0,1)

s'appelle la page [[# # ~] doit [~ # ~] être plus longue que la fenêtre pour qu'un événement de défilement puisse se produire.

Ce n'est que lorsque le défilement se produit que Safari mobile masquera la barre d'adresse.

64
rob

À moins que quelque chose n'ait changé dans les versions récentes d'iOS, l'astuce de défilement vers le bas est la seule 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);​

Cependant, je ne me souciais d'aucune autre plate-forme mobile pour cette page particulière, il s'agissait d'une redirection basée sur l'agent ... vous souhaiterez peut-être modifier l'expression régulière pour vérifier spécifiquement l'iPhone, par exemple remplacer /mobile/ avec /iPhone/.

9
Nick Craver

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

Pour les nouveaux googleurs qui étudient ceci: Depuis iOS 7.1 , il y a un nouveau minimal-ui mode qui fonctionne sur Safari mobile:

minimal-ui

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

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

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

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

À noter, il n'y a pas d'exigence de longueur de contenu minimale comme c'est le cas avec le hack scrollTo. Il y a un bon aperçu de ce nouveau mode ici . (C'est de là que vient l'image ci-dessus.) Il énumère également quelques lacunes.

La seule documentation officielle que j'ai pu trouver à ce sujet est une note dans Notes de version iOS 7.1 d'Apple :

Une propriété, minimal-ui, a été ajoutée pour la clé de balise META de la fenêtre d'affichage qui permet de minimiser les barres supérieure et inférieure de l'iPhone lors du chargement de la page. Sur une page utilisant minimal-ui, appuyer sur la barre supérieure ramène les barres. Taper dans le contenu les rejette à nouveau.

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

Bien sûr, puisque cela ne fonctionne que dans iOS 7.1 et supérieur , son utilité peut être limitée.

6
markquezada

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);
5
Simon East

J'ai également cherché sur cette application Web en plein écran et je l'ai trouvé.

http://www.onlywebpro.com/2015/07/19/optimizing-full-screen-mobile-web-app-for-ios/

1. fondamentalement, vous devez ajouter ce qui suit dans votre en-tête:

<meta name="viewport" content = "width = device-width, initial-scale = 1.0, minimum-scale = 1, maximum-scale = 1, user-scalable = no" />

//App name
<meta name="Apple-mobile-web-app-title" content="App name" />

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

<meta name="Apple-mobile-web-app-status-bar-style" content="black" />

//APP ICONS 
<link rel="Apple-touch-icon" href="/img/icon.png">

<link rel="Apple-touch-icon" sizes="76x76" href="/img/icon.png">

<link rel="Apple-touch-icon" sizes="120x120" href="/img/icon.png">

<link rel="Apple-touch-icon" sizes="152x152" href="/img/icon.png">
  1. Ouvrez le site sur Safari
  2. Appuyez sur l'icône "Ouvrir avec" (flèche pointant vers le haut et case en dessous) à côté du bouton Actualiser dans la barre d'URL
  3. Sélectionnez "Ajouter aux éboulis"
  4. accédez à l'écran d'accueil et ouvrez le "Nom de l'application"
  5. Voila! site Web sans barre d'URL ni boutons de navigation!
3
mmw5610
<meta name="Apple-mobile-web-app-capable" content="yes" />

iPhone Configuration des applications Web

2
Creatorus

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

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

Essayer:

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

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

2
Mike

Dans le cas où aucune de ces solutions ne fonctionne et que vous rencontrez le problème très étroit que j'ai rencontré, voici ce qui l'a résolu pour moi.

J'avais ça dans mon CSS

html{position: relative; height: 100%; overflow: hidden;}

Ce CSS applique un correctif à l'une de mes pages uniquement, je l'ai donc limité avec une condition à cette page, et la barre d'adresse se comporte désormais correctement sur toutes les autres pages.

1
Mo Alsaedi

Je pense qu'il ne sera jamais résolu à moins que le contenu ne soit plus que la fenêtre du navigateur.

Voici un code qui masquera l'URL lors du chargement, lors du changement d'orientation et sur un démarrage tactile (le démarrage tactile ne doit être utilisé que si vous avez une URL cachée persistante, qui est un tout autre bidon 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);
     });
}
1
foliomobshawn