83 votes

WebApp iPad en plein écran dans Safari

Apple dit dans le Référence HTML Safari que le code ci-dessous est censé rendre l'application web en plein écran sur iPhone OS 2.1 et plus.

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

Mais cela ne semble pas fonctionner. Existe-t-il un moyen de masquer la barre de titre/de localisation dans Safari dans une WebApp iPad ?

120voto

jamone Points 6458

Cela ne fonctionne qu'après avoir enregistré un signet de l'application sur l'écran d'accueil. Pas si vous naviguez sur le site normalement.

13 votes

Si vous ajoutez cette balise méta à votre ancienne page Web que vous avez consultée précédemment dans Safari, vous devez d'abord rafraîchir l'URL, puis l'ajouter à l'écran d'accueil pour que la balise méta fonctionne.

0 votes

Cela ne fonctionne pas pour moi sur un projet Laravel. J'ai ajouté ceci à mon modèle de mise en page app.blade. Il est utilisé par chacune de mes pages, donc l'en-tête devrait apparaître (et apparaît) sur chaque page. Pourtant, j'ai toujours des barres Safari sur mon iPhone et mon iPad, même après avoir effectué de nombreux tests pour vider le cache, recréer le raccourci de l'écran d'accueil comme mentionné dans ce post. Y a-t-il quelque chose d'autre qui pourrait empêcher les barres Safari de se cacher ? pastebin.com/iSFDXjFz voici la section head de mon fichier app.blade.php. Merci d'avance.

16voto

Remco de Jong Points 113

Si vous voulez rester dans un navigateur sans lancer une nouvelle fenêtre, utilisez ce code HTML :

<a href="javascript:this.location = 'index.php?page=1'">

4 votes

Cela ne semble pas pertinent par rapport à la question ou au sujet traité. Peut-être pourriez-vous expliquer comment cela se rapporte ?

7 votes

Très pertinent. C'est toujours le problème suivant après avoir obtenu l'application web en plein écran.

0 votes

Pour moi, la question suivante est "comment rafraîchir la page maintenant qu'elle est en mode plein écran ?".

13voto

CodingWay Points 529
  1. Tout d'abord, lancez votre navigateur Safari depuis l'écran d'accueil et accédez à la page Web que vous souhaitez afficher en plein écran.

  2. Après avoir localisé la page web, appuyez sur l'icône de la flèche en haut de votre écran.

  3. Dans le menu déroulant, tapez sur l'option Ajouter à l'écran d'accueil.

  4. La fenêtre Ajouter à la maison devrait s'afficher. Vous pouvez personnaliser la description qui apparaîtra comme titre sur l'écran d'accueil de votre iPad. Lorsque vous avez terminé, appuyez sur le bouton Ajouter.

  5. Une nouvelle icône devrait maintenant apparaître sur votre écran d'accueil. En cliquant sur cette icône, vous ouvrirez la page Web en mode plein écran.

Remarque : L'icône sur l'écran d'accueil de votre iPad n'ouvre la page marquée d'un signet qu'en mode plein écran. La prochaine page que vous visiterez contiendra les barres d'adresse et de titre de Safari. Cette façon de lire votre page web ou votre présentation HTML5 en mode plein écran fonctionne si le code source de la page web contient la balise suivante :

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

Vous pouvez ajouter cette balise à votre page web en utilisant un outil tiers, par exemple iWeb SEO Tool ou tout autre outil de votre choix. Veuillez noter que vous devez d'abord ajouter la balise, rafraîchir la page et ensuite ajouter un signet à votre écran d'accueil.

0 votes

Vous auriez pu dire qu'il s'agit d'une copie directe d'une instruction trouvée à l'adresse suivante ispringsolutions.com/articles/ :-)

3 votes

Et peut-être ont-ils copié le mien :) Regardez la date à laquelle j'ai répondu à cette question et comparez-la à leur date de publication.

0 votes

A la vôtre ! C'est gentil de votre part. :)

7voto

Joop Stringer Points 51

Il n'ouvre que la première page (marquée d'un signet) en plein écran. Toute page suivante sera ouverte AVEC la barre d'adresse à nouveau visible. Quelle que soit la balise méta que vous mettez dans l'en-tête de votre page...

0 votes

1voto

xiatica Points 473

Ce site propose une solution de contournement qui fonctionne, avec le même effet, en utilisant du javascript pour définir la première division enfant à la hauteur totale de la fenêtre d'affichage. http://webapp-net.com/Demo/Index.html

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X