Définition du nom de l’icône «Écran d’accueil» pour Safari mobile

Par défaut, lors de la mise en signet d’un site Web en tant qu’icône (en choisissant d’ append à l’écran d’accueil depuis le menu “+” de Safari), le nom de l’icône par défaut est </code> , tronqué à 12 caractères. </p> <p> De la même façon que <code>apple-touch-icon</code> vous permet de spécifier votre propre représentation iconifiée de la page, la page Web peut-elle indiquer un nom d’icône par défaut autre que son <code><title></code> ? </p><ul><li><a class="text-dark" href="https://www.ipgirl.com/53478/lapplet-java-ne-peut-pas-ouvrir-les-fichiers-sous-safari-7-mac-os-x-10-9.html" rel="bookmark" title="L'applet Java ne peut pas ouvrir les fichiers sous Safari 7 (Mac OS X 10.9)">L'applet Java ne peut pas ouvrir les fichiers sous Safari 7 (Mac OS X 10.9)</a></li><li><a class="text-dark" href="https://www.ipgirl.com/71300/differences-entre-uiwebview-et-safari-mobile.html" rel="bookmark" title="différences entre uiwebview et safari mobile">différences entre uiwebview et safari mobile</a></li><li><a class="text-dark" href="https://www.ipgirl.com/18790/copier-mettre-du-texte-dans-le-presse-papiers-avec-firefox-safari-et-chrome.html" rel="bookmark" title="Copier / Mettre du texte dans le presse-papiers avec FireFox, Safari et Chrome">Copier / Mettre du texte dans le presse-papiers avec FireFox, Safari et Chrome</a></li><li><a class="text-dark" href="https://www.ipgirl.com/48014/liste-des-differences-connues-entre-safari-sur-ipad-et-desktop-safari.html" rel="bookmark" title="Liste des différences connues entre «Safari sur iPad» et «Desktop Safari»">Liste des différences connues entre «Safari sur iPad» et «Desktop Safari»</a></li><li><a class="text-dark" href="https://www.ipgirl.com/22820/cacher-la-poignee-de-redimensionnement-de-textarea-dans-safari.html" rel="bookmark" title="Cacher la poignée de redimensionnement de textarea dans Safari">Cacher la poignée de redimensionnement de textarea dans Safari</a></li></ul> </p> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-2131274154113768" data-ad-slot="2093644592"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <ul><li><a class="text-dark" href="https://www.ipgirl.com/55452/balise-video-html5-ne-fonctionnant-pas-dans-safari-iphone-et-ipad.html" rel="bookmark" title="Balise vidéo HTML5 ne fonctionnant pas dans Safari, iPhone et iPad">Balise vidéo HTML5 ne fonctionnant pas dans Safari, iPhone et iPad</a></li><li><a class="text-dark" href="https://www.ipgirl.com/25538/selection-de-texte-sur-focus-a-laide-de-jquery-ne-fonctionnant-pas-dans-safari-et-chrome.html" rel="bookmark" title="Sélection de texte sur focus à l'aide de jQuery ne fonctionnant pas dans Safari et Chrome">Sélection de texte sur focus à l'aide de jQuery ne fonctionnant pas dans Safari et Chrome</a></li><li><a class="text-dark" href="https://www.ipgirl.com/61433/safari-en-ignorant-le-tabindex.html" rel="bookmark" title="Safari en ignorant le tabindex">Safari en ignorant le tabindex</a></li><li><a class="text-dark" href="https://www.ipgirl.com/38354/nodejs-express-cache-et-code-de-statut-304.html" rel="bookmark" title="NodeJS / express: cache et code de statut 304">NodeJS / express: cache et code de statut 304</a></li><li><a class="text-dark" href="https://www.ipgirl.com/70153/atsortingbut-requirejs-ne-fonctionne-pas-dans-le-navigateur-safari.html" rel="bookmark" title="Atsortingbut requirejs Ne fonctionne pas dans le navigateur Safari">Atsortingbut requirejs Ne fonctionne pas dans le navigateur Safari</a></li><li><a class="text-dark" href="https://www.ipgirl.com/23197/le-debordement-masque-applique-a-fonctionne-t-il-sur-iphone-safari.html" rel="bookmark" title="Le débordement: masqué appliqué à fonctionne-t-il sur iPhone Safari?">Le débordement: masqué appliqué à fonctionne-t-il sur iPhone Safari?</a></li><li><a class="text-dark" href="https://www.ipgirl.com/11311/iphone-safari-web-app-ouvre-les-liens-dans-une-nouvelle-fenetre.html" rel="bookmark" title="iPhone Safari Web App ouvre les liens dans une nouvelle fenêtre">iPhone Safari Web App ouvre les liens dans une nouvelle fenêtre</a></li><li><a class="text-dark" href="https://www.ipgirl.com/32512/chrome-safari-en-ignorant-la-largeur-maximale-dans-le-tableau.html" rel="bookmark" title="Chrome, Safari en ignorant la largeur maximale dans le tableau">Chrome, Safari en ignorant la largeur maximale dans le tableau</a></li></ul> <div class="list-group list-group-flush"> <div class="list-group-item list-group-item-action flex-column align-items-start"> <p> Dans iOS 6, ceci est résolu avec une balise meta: </p> <pre> <code><meta name="apple-mobile-web-app-title" content="Short name"/></code> </pre> <p> Comme cwap l’a justement commenté: c’est maintenant la documentation officielle. Voici toutes les informations sur la définition des balises META pour les applications Web: <a href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html" rel="nofollow ugc">https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html</a> </p> </div> </li><!-- #comment-## --> <div class="list-group-item list-group-item-action flex-column align-items-start"> <p> Pour iOS: </p> <pre> <code><meta name="apple-mobile-web-app-title" content="Short name"/></code> </pre> <p> Pour Android: </p> <pre> <code><meta name="application-name" content="Short name"/></code> </pre> </div> </li><!-- #comment-## --> <div class="list-group-item list-group-item-action flex-column align-items-start"> <p> Pour une meilleure compatibilité croisée sur toutes les versions d’iOS, vous pouvez utiliser une combinaison de réponses (inspirée de <a href="https://stackoverflow.com/a/13838563/1048705" rel="nofollow ugc">https://stackoverflow.com/a/13838563/1048705</a> ): </p> <p> Placez ceci dans votre document pour iOS 6+: </p> <pre> <code><meta name="apple-mobile-web-app-title" content="Short name"/></code> </pre> <p> et utiliser le contenu de cette balise pour le titre pour les autres versions iOS qui ne supportent pas directement la balise: </p> <pre> <code>if (navigator.userAgent.match(/(iPad|iPhone|iPod)/i)) { document.title = document.getElementsByName('apple-mobile-web-app-title')[0].content; }</code> </pre> <p> Notez que le JavaScript changera le titre pour tous les clients iOS, y compris iOS 6+. </p> </div> </li><!-- #comment-## --> <div class="list-group-item list-group-item-action flex-column align-items-start"> <p> Il ne semble pas y avoir de moyen de le faire avec les balises META ou quelque chose comme ça. Ma suggestion serait d’utiliser la logique côté serveur pour donner aux iPhones un titre différent. Par exemple, en php, vous pourriez faire quelque chose comme ceci: </p> <pre> <code><title><?php echo strpos($_SERVER['HTTP_USER_AGENT'], 'iP')?'iDevice title':'normal title'; ?>

C’est comme ça que j’ai travaillé pour mon client fictif, “Super Epic Resort Hotels”, nom abrégé “SERH” pouvant correspondre à la limite du nom de l’icône de l’écran d’accueil iOS. (Soit dit en passant, la limite semble être basée à la fois sur le nombre de caractères (13 sur mon iPad) et la largeur rendue.)

Tapez le nom avec ￿ caractères jusqu’à ce qu’il atteigne la limite. Dans mon cas, 9 semble être suffisant mais vous pouvez toujours en append plus au cas où.

 SERH￿￿￿￿￿￿￿￿￿ - Super Epic Resort Hotels 

Lorsque vous ajoutez la page à l’écran d’accueil, Safari suggère le nom:

SERH

ce qui est actaully

SERH

mais l’utilisateur ne les remarquera pas, comme ￿ les caractères sont invisibles sur iOS et ne prennent pas de place, jusqu’à ce que l’utilisateur essaie de revenir en arrière. Dans mon cas, l’utilisateur doit reculer de 9 fois avant de pouvoir revenir en arrière “SERH”.

Edit: Utilisez ceci en conjonction avec la solution de qmega cidessus , en tant que ￿ les caractères peuvent être visibles sur les appareils non-iOS.

Pour iOS 6, utilisez la solution de Maarteen. Pour la compatibilité avec iOS 5, vous pouvez également modifier le titre en utilisant JS:

 if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/iPad/i)) { document.title = "Short Title"; } 

Probablement mieux d’attacher ceci à body onload en utilisant JQuery.

Vous pouvez vous référer à l’URL ci-dessous pour définir l’icône et le nom: https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

header append le code ci-dessous:

  // For icon  // For name 

Je pense que le safari ne vous permettra pas de rendre une page de votre page d’accueil à la fin, il est inutile de faire de n’importe quel moteur de recherche votre page d’accueil