C'est une méthode un peu simpliste, pas forcément la meilleure mais en tout cas, la meilleure en terme de rapport qualité / temps que j'ai trouvée pour rendre votre blog lisible depuis un iPhone sans obliger vos lecteurs à zoomer sur vos articles.
Cela tient en une ligne (ou 2) à insérer dans le code source de votre blog. Pour cela, rendez vous dans l'onglet "Mise en page" > "Modifier le code HTML", voir illustration ci-dessous :
Puis, dans le champ de saisie, placez le code suivant :
<meta content='yes' name='apple-mobile-web-app-capable'/>
<meta content='initial-scale=0.72, user-scalable=no' name='viewport'/>
...juste en dessous de la balise ouvrante "<head>" comme ceci (vous pouvez cliquer sur l'image pour la voir en grand) :
La première ligne sert simplement à cacher la barre de navigation du navigateur Safari de votre iPhone une fois la page chargée, ce qui laisse plus d'espace de lecture à vos lecteurs.
La seconde ligne indique à Safari la taille initiale à laquelle il doit afficher votre site. Vous pouvez faire varier la valeur 0,72 jusqu'à obtenir un résultat satisfaisant sur votre iPhone.
Ces 2 lignes n'ayant d'impact que sur les navigateurs Safari pour iPhone, il n'y aura pas d'effets de bord sur les navigateurs web classiques.
Limitations :
- si vous avez une colonne à gauche, alors cette solution risque de ne pas être idéale (mais qui affiche des colonnes à gauche de nos jours ?).
- votre colonne de droite sera lisible à condition que l'utilisateur déplace sa zone de visualisation dessus mais encore une fois, ceci est solution "rapide", pas parfaite malheureusement.
Et si j'ai pas Blogger, je fais comment moi m'sieur ? Pour les autres blogs, il existe certainement des plugins beaucoup plus efficaces.
Dernièrement, si vous avez quelques connaissances en JavaScript / CSS et beaucoup plus de temps, vous pouvez rediriger les iPhones vers une version totalement adaptée. Ceci pourra peut-être faire l'objet d'un prochain article...
Articles
