initial-scale=1, le pour et le contre

EDIT (octobre 2012) :

Après la sortie de l’iOS6 d’Apple et de nouveaux tests, mon avis et ma conclusion concernant initial-scale ont beaucoup changé.

Pour résumer :

initial-scale=1.0 adapte le viewport aux dimensions du périphérique (aux valeurs device-width et device-height), c’est donc une bonne chose puisque la taille du viewport s’adapte à l’orientation du périphérique.
width=device-width impose une taille de viewport qui correspond toujours à la largeur du périphérique, c’est donc faussé en orientation portrait puisque la taille du viewport reste figée à la largeur du terminal alors qu’elle devrait correspondre à sa hauteur.

Au final, je conseillerais plutôt d’employer initial-scale tout seul, surtout pas la valeur unique width=device-width. La combinaison des deux ne semble pas poser de problème car initial-scale l’emporte.

Pour en savoir plus, consultez le billet “Adieu width=device-width ?”

Si vous vous intéressez un tant soi peu à l’intégration web sur mobiles, vous avez sans-doute déjà rencontré le meta tag viewport, dans une syntaxe proche de celle-ci :

<meta name="viewport" content="width=device-width, initial-scale=1">

Initialement intégrée dans le célèbre HTML5boilerplate, la partie “initial-scale=1” a été retirée car elle était généralement plus néfaste que bénéfique.

Plantons le décor

Pour mieux comprendre le phénomène et ses implications, rappelons deux comportements indésirables et distincts rencontrés sur les terminaux Apple lors de l’affichage des pages au format paysage :

Sur iOS4 et iOS5 (corrigé sur iOS6), un bug d’affichage provoque un zoom global de la page lors du passage en paysage : le design “dépasse” alors de la zone d’affichage (viewport),
Toujours sur iOS, le device-width est identique en portrait qu’en paysage. Il est par exemple de 320px sur iPhone dans les deux orientations. Par conséquent, au passage en landscape, la proportion passe de 640/320 à 960/320 et si votre site était parfaitement adapté au format portrait, les éléments seront environ 1/3 plus grands en paysage.

Le premier point est un bug connu des versions iOS4 et 5, le second point est une conséquence du souhait d’Apple de conserver un device-width identique en portrait et en paysage.

Revenons à initial-scale…

Sur certains sites web non adaptés aux mobiles (donc affichés de façon minuscule), les navigateurs tels qu’Opera Mobile peuvent décider automatiquement et sans vous demander la permission d’afficher les pages avec un niveau de zoom de départ, afin d’éviter aux visiteurs de devoir tout agrandir par eux-même pour pouvoir lire le texte. Ce zoom initial décidé par le navigateur mobile correspond à un ratio de la propriété initial-scale.

En fixant initial-scale à 1 (ou 1.0), vous forcez le niveau de zoom initial à 1/1, ce qui vous assure d’un rendu identique sur tous les supports dès le départ.

EDIT. En outre, cela permet de conserver la taille de police lors du passage en paysage (les mobiles ont tendance à agrandir les textes en paysage puisque le ratio de pixels change).
Or initial-scale interfère sur la mesure de device-width (au-moins chez Apple).
En effet, sans initial-scale, un iPhone conserve la valeur de device-width à 320px qu’il soit en portrait ou en paysage. Lorsque initial-scale est défini, le device-width passe alors à 480px en paysage.

En théorie, c’est très bien tant qu’il n’y a pas de bugs. Et justement, les périphériques Apple buggent au format paysage lorsque initial-scale est déclaré : le design ne s’adapte pas à la taille de l’écran landscape, il dépasse et nous sommes obligé de faire un zoom inverse pour que tout rentre correctement :/

En résumé, voici les deux options :

Vous employez “initial-scale=1”
Cela vous affranchit de l’agrandissement indésirable des polices sur iOS lors du passage en orientation paysage, MAIS vous créez un bug de zoom général de toute la page qu’il faut corriger via un fix JavaScript,
Vous n’employez pas “initial-scale=1”
Vous n’aurez pas de bug de zoom global sur iOS, mais vous devez redéfinir la taille des polices avec un -webkit-text-size-adjust de 66% appliqué sur HTML par exemple :

@media (max-device-width:768px) and (orientation:landscape) {
   html {-webkit-text-size-adjust:66%}
}

Avertissement !

Aucune solution n’est parfaite. Tout simplement parce qu’elle ne fait que régler un problème sur les terminaux Apple.

La question se pose pour tous les autres terminaux : ont-il aussi ce souci d’affichage (donc un device-width identique en portrait qu’en paysage) ? Il me semble que oui pour certains… mais pas tous.

Bref, il faudrait aussi dans l’idéal cibler quelques android mais pas tous… Et quelques retinas mais pas tous :/

EDIT : après quelques tests, il semble que le petit script JS de ScottJehl n’est pas si mauvais que ça puisqu’il se limite aux terminaux Apple (via User Agent) et n’impacte pas les autres. Il a l’air léger, rapide et efficace.

Captures d’écran (série 1)

Les captures ont été réalisées sur un iPhone4 (iOS5) sous le navigateur Safari.

1- étalon initial en portrait

2- étalon initial en paysage (pas de initial-scale)

3- initial-scale=1 en paysage

4- pas de initial-scale et html {webkit-text-size-adjust: 66%} en paysage

Captures d’écran (série 2)

Autre série pour illustrer l’impact de initial-scale sur le device-width et l’usage du script de Scott Jehl.

1- étalon initial en portrait

2- étalon initial en paysage (pas de initial-scale ni script JS)
La proportion passe de 640/320 à 960/320 et le design apparaît 1/3 plus grand qu’en portrait.

3- ajout de initial-scale=1 (vue paysage)
officiellement, la largeur change (480px au-lieu de 320px) mais on assiste à un bug d’iOS4/5 qui agrandit la page automatiquement, d’où la vue identique au test précédent. Il s’agit d’un trompe-l’oeil ;)

4- initial-scale=1 et script JS correctif

La tête dans le Flux !