Définition du nom de l'icône de l'"écran d'accueil" pour le Safari mobile

Question

Par défaut, lorsqu'on "marque" un site web en tant qu'icône (en choisissant l'option Ajouter à l'écran d'accueil à partir de l'interface de Safari "+" ), le nom de l'icône est remplacé par défaut par celui de la page. <title> tronqué à 12 caractères.

De la même manière que apple-touch-icon vous permet de spécifier votre propre représentation iconifiée de la page, existe-t-il un moyen pour la page web de spécifier un nom d'icône par défaut autre que son <title> ?

Answer 1

Dans iOS 6, ce problème est résolu grâce à une métabalise :

<meta name="apple-mobile-web-app-title" content="Short name">

Comme cwap a commenté à juste titre : C'est maintenant une documentation officielle. Voici toutes les informations sur le réglage meta pour les applications web : https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

Answer 2

Pour une meilleure compatibilité croisée sur toutes les versions d'iOS, vous pourriez utiliser une combinaison de réponses (inspirée par https://stackoverflow.com/a/13838563/1048705 ):

Placez ceci dans votre document pour iOS 6+ :

<meta name="apple-mobile-web-app-title" content="Short name">

et utiliser le contenu de cette balise comme titre pour les autres versions d'iOS qui ne prennent pas en charge la balise directement :

if (navigator.userAgent.match(/(iPad|iPhone|iPod)/i)) {
    document.title = document.getElementsByName('apple-mobile-web-app-title')[0].content;
}

Notez que le JavaScript modifiera le titre pour tous les clients iOS, y compris iOS 6+.

Answer 3

Il ne semble pas y avoir de moyen de le faire avec des balises méta ou autre. Ma suggestion serait d'utiliser une logique côté serveur pour donner aux iPhones un titre différent. Par exemple, en php, vous pourriez faire quelque chose comme ceci :

<title><?php echo strpos($_SERVER['HTTP_USER_AGENT'], 'iP')?'iDevice title':'normal title'; ?></title>

Answer 4

Voici comment j'ai contourné ce problème pour mon client fictif, "Super Epic Resort Hotels", dont le nom abrégé "SERH" correspond à la limite de noms d'icônes sur l'écran d'accueil d'iOS. (Au fait, la limite semble être basée à la fois sur le nombre de caractères (13 sur mon iPad) et sur la largeur du rendu).

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

<title>SERH&#xFFFF;&#xFFFF;&#xFFFF;&#xFFFF;&#xFFFF;&#xFFFF;&#xFFFF;&#xFFFF;&#xFFFF; - Super Epic Resort Hotels</title>

Lors de l'ajout de la page à l'écran d'accueil, Safari suggère le nom :

SERH

qui est en fait

SERH퟿�퟿�퟿�퟿�퟿�퟿�퟿�퟿�퟿�퟿�퟿�퟿�

mais l'utilisateur ne les remarquera pas, car l'image de l  sont invisibles sur iOS et ne prennent pas de place, jusqu'à ce que l'utilisateur essaie d'effacer le nom en arrière. Dans mon cas, l'utilisateur doit revenir en arrière 9 fois avant de pouvoir revenir en arrière sur "SERH".

Edit : Utilisez ceci en conjonction avec la solution de qmega ci-dessus. comme le  Les caractères peuvent être visibles sur les appareils non iOS.

Answer 5

Pour iOS 6, utilisez la solution de Maarteen. Pour la compatibilité avec iOS 5, vous pouvez également changer 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";
}

Le mieux est sans doute de l'attacher au corps du message en utilisant JQuery.