iPhone et icône personnalisée du signet
Rédigé par Hamtaro - 05 janvier 2009 21:34 ★ 11 commentaires

Depuis quelques jours, je travaille sur une adaptation de thème (WPTouch pour WordPress), spécialement pour les utilisateurs iPhone et iPod Touch (mais aussi les autres mobiles, le thème étant idéal pour les petites résolutions). C'est en parcourant le code pendant des heures et des heures que je me suis aperçu qu'il existe quelques astuces propres à l'utilisateur sous Safari Mobile.
Lorsqu'un utilisateur sous iPhone décide d'ajouter un signet visible sur le SpringBoard (Fonction Ajouter à l'écran d'accueil) afin d'accéder plus rapidement à un site sans avoir à passer par l'icône Safari, une nouvelle icône est attribuée. Cette icône, si le site n'effectue pas l'astuce que je vais vous décrire, représente une capture d'écran de la page renvoyée sous Safari.
Il est donc très simple de personnaliser cela en disant à Safari d'utiliser votre propre icône.
Il est grand temps d'attaquer la partie monstrueusement technique et de faire peur à tout le monde. La ligne de code responsable de cette action se place juste avant la balise </head>, selon les plateformes, celle-ci se trouve dans le fichier template head.php ou header.php. Voici donc le fameux code :
<link href="http://www.chemin.de/votre/image.png" rel="apple-touch-icon" />
Une icône de 60x60 pixels devrait suffire.
J'ai une préférence pour le .png (gestion de la transparence) et j'avoue franchement que je ne sais pas si l'iPhone accepte d'autres formats à mettre sur le SpringBoard (c'est également le format utilisé pour les thèmes).
Vous pouvez maintenant faire joujou (je l'ai pas encore fait, il faut que je trouve un logo) et transformer votre favicon pour qu'il vienne éblouir les écrans des utilisateurs iPhone. ;)
TCho, Hamtaro.

11 commentaires