web-dev-qa-db-fra.com

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

Par défaut, lorsque vous "marquez" un site Web sous forme d'icône (en choisissant Ajouter à l'écran d'accueil dans le menu "+" de Safari), le nom de l'icône est par défaut 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>?

iphonesafariiconsmobile-safari
58
pilcrow

Dans iOS 6, cela est résolu avec une balise META:

<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 la définition de balises meta pour les applications Web: https://developer.Apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html =

207
Maarten Wolzak

Pour iOS:

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

Pour Android:

<meta name="application-name" content="Short name">
13
Dexter

Pour une meilleure compatibilité croisée sur toutes les versions d'iOS, vous pouvez utiliser une combinaison de réponses (inspirée de 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 utilisez le contenu de cette balise pour le titre d'autres versions d'iOS qui ne prennent pas directement en charge la balise:

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

Notez que le JavaScript changera le titre de tous les clients iOS, y compris iOS 6+.

4
davidjb

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

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

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

Dans la tête, ajoutez le code ci-dessous:

<link rel="Apple-touch-icon" href="/custom_icon.png"> // For icon
<meta name="Apple-mobile-web-app-title" content="Short name"> // For name
1
hectk

Pour iOS 6, utilisez la solution de Maarteen. Pour la compatibilité avec iOS 5, vous pouvez également modifier le titre à l'aide de JS:

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

Il est probablement préférable de l'attacher à la surcharge du corps à l'aide de JQuery.

1
NickG

Je pense que safari ne vous permettra pas de faire de n'importe quelle page votre page d'accueil à la fin, il ne sert à rien de faire de n'importe quel moteur de recherche votre page d'accueil

0
Ahmad Ebrahim