J’ai installé WPtouch, un plugin WordPress sur le Touilleur Express afin que les visiteurs utilisant l’iphone puissent voir une version optimisée pour l’iphone. De fil en aiguille je me suis demandé comment tester ce plugin… si vous n’avez pas d’iphone sous la main.
Il existe des sites internets comme TestiPhone ou iPhone Tester qui permettent de simuler la taille de l’écran de l’iphone. Cependant ces site ne sont pas capables de spécifier un User-Agent différent dans les entêtes HTTP puisqu’il s’agit de votre propre navigateur. Le site s’affiche alors normalement car le serveur ne reconnaît pas l’iphone.
Firefox
Firefox propose un moyen de changer la variable User-Agent avec le plugin User Agent Switcher. Il faut ensuite connaître la valeur de la variable User-Agent de l’iphone, ce que j’ai trouvé dans les logs d’accès du Touilleur :
Mozilla/5.0 (iPhone; U; CPU iPhone OS 2_2 like Mac OS X; fr-fr) AppleWebKit/525.18.1 (KHTML, like Gecko) Version/3.1.1 Mobile/5G77 Safari/525.20
Après avoir installé le plugin et relancé Firefox, dans le menu Outils / Agent Switcher sélectionnez Options. Dans l’onglet User Agent vous pouvez alors déclarer un nouveau navigateur. Ayant mis à jour mon iphone 3G en version 2.2 voici ce que j’ai saisi :
- Description: iPhone 3G FR update 2.2
- User Agent: Mozilla/5.0 (iPhone; U; CPU iPhone OS 2_2 like Mac OS X; fr-fr)
- App Name: AppleWebKit/525.18.1 (KHTML, like Gecko)
- App Version: Version/3.1.1
- Platform: Mobile/5G77 Safari/525.20
Une fois votre nouveau navigateur déclaré, vous pouvez alors l’activer via le menu Outils, et tentez de recharger la page du touilleur, vous devriez alors voir ceci :
Il ne reste plus qu’à charger la page via le site http://www.testiphone.com afin d’avoir un affichage très semblable à celui de l’iphone. Il reste simplement le souci que le navigateur n’est pas Safari mais Firefox. Certaines fonctions Javascript pourraient avoir un comportement un peu différent.
Voici le résultat final
Voici une petite liste de sites spécialement adaptés à l’iphone :
- Google Calendar
- Google Reader
- Le Blog de Xebia
qui utilise aussi le plugin WPtouch
Safari
Si vous souhaitez tester avec Safari il est aussi possible de changer la variable User-Agent lorsque Safari est démarré en mode développeur. C’est vraiment très simple :
– fermez Safari
– ouvrez un Terminal
– tapez dans la console la ligne de commande suivante : defaults write com.apple.Safari IncludeDebugMenu 1 puis Enter
– relancez Safari, un menu Développement est apparu.
– dans le menu « Agent d’utilisateur » vous pouvez maintenant faire passer Safari pour Internet Explorer ou pour la version iphone !
C’est le moyen le plus efficace pour tester la navigation d’un site développé pour l’iPhone sans s’embêter avec le development kit d’Apple.
