Adapté à MobileSafari

Je voulais depuis quelque temps rendre mon site web plus attrayant sur un iPhone ou un iPod Touch. J’ai essayé quelque chose il y a un peu plus d’un an en ajoutant des « media queries » à ma feuille de style pour que les règles déjà applicables à @media handheld s’applique aussi au iPhone. Une fois testé cependant, le résultat n’était pas vraiment génial. Par contre, maintenant que j’ai un vrai iPod Touch, j’ai pu expérimenté un peu plus.

Le but est ne ne pas avoir à zoomer pour lire le contenu, le défilement vertical devrait être l’unique chose nécessaire. Les contraintes techniques que je me suis imposés sont :

1. Pas de page séparé pour MobileSafari. Bien que ça aurait été certainement possible, mes pages sont déjà assez légères pour rendre cette idée plutôt inutile.

2. Tout ceci ne concerne que la présentation du site, il ne devrait donc pas y avoir rien à modifier dans le HTML des pages. Tout devrait être fait à partir des feuilles de style.

Cette deuxième contrainte était un peu problématique vu qu’Apple a décidé pour certaines raisons qui m’échappent que le « viewport » pour la page serait placé dans un tag meta dans l’entête du fichier HTML, comme ceci :

<meta name="viewport" content="width=808" />

Ceci me laisse sans la possibilité de changer la largeur du contenu en pixel virtuel, et MobileSafari n’est pas assez brillant pour se rendre compte que mon site n’utilise pas tous les 980 pixels virtuels pour changer la largeur de façon adéquate.

J’ai finalement solutionné le problème en utilisant la directive CSS -webkit-text-size-adjust (spécifique à MobileSafari) pour augmenter la taille du texte jusqu’à ce que la page couvre toute la largeur de l’écran. Le désavantage de cette approche est que les images restent un peu trop petites, mais puisque ce site contient principalement du texte, et puisqu’il est facile de zoomer sur les images avec un iPhone, ça ne fait pas grand mal.

Maintenant, il y a beaucoup plus que ça dans ma feuille de style handheld/MobileSafari, notamment l’usage de Helvetica au lieu de Palatino et un petit rearrangement de ma page d’accueil pour éviter d’avoir deux colones. Et j’aime bien le résultat, puisqu’il n’est pratiquement plus nécessaire de zoomer sur quoi que ce soit maintenant.

Et je viens juste de réaliser qu’avec le iPhone SDK disponible gratuitement de Apple, il n’est pas nécessaire d’avoir un véritable appareil entre les mains pour tester son site web avec MobileSafari. Le SDK contient un simulateur de iPhone qui inclus MobileSafari, qui est parfaitement adéquat pour tester. La seule chose qui va vous manquer c’est la grande résolution de l’écran du iPhone/iPod Touch… et peut-être la difficulté de toucher les bons éléments avec vos doigts.