Viewport : adieu width=device-width ?
Bonus : summary in english :
- initial-scale=1.0 fits the viewport to the dimensions of the device (device-width and device-height values), which is a good idea because the size of the viewport fits the dimensions of the device regardless of its orientation.
- width=device-width size the viewport to always corresponds to the (fixed value) width of the device, and thus is distorted in landscape orientation because que right value should be “device-height” not “device-width” in landscape (and it’s worse on iPhone5 whose device-height value is 568px, compared to its 320px device-width).
Therefore, I would rather recommend to use initial-scale alone, not associated width=device-width. Because the combination of the two is problematic, and moreover I think than even only width=device-width is problematic.
More info : Apple doc “How to configure Viewport”.
Je viens de tomber sur une ressource plutôt passionnante que j’avais parcouru rapidement il y a quelques années, mais qui prend tout son sens aujourd’hui pour moi.
Cette ressource, provenant des guides Apple pour le web mobile se nomme “Comment configurer le Viewport”. Elle est en anglais.
1- Vues du viewport par défaut (980px) et fixé à width=320 :
2- Affichage d’une page avec Viewport par défaut (980px) :
3- width=device-width en portrait et en paysage (pas de initial-scale) :
4- initial-scale=1 en portrait et en paysage (pas de width=device-width) :
Synthèse
Si l’on en croit les explications d’Apple et les différents exemples de la page :
- La présence de width=device-width dans la meta viewport définit un canevas d’affichage en “pixels CSS” qui est celui par défaut du périphérique, donc par exemple 320x480px pour iPhone4.
Cependant, la largeur width du terminal (ex. 320px) ne change pas si on modifie l’orientation, ce qui provoque un léger agrandissement en paysage puisque la largeur physique a changé. - La présence de initial-scale=1.0 dans la meta viewport définit un niveau de zoom d’affichage par défaut en “pixels CSS” qui est celui par défaut du périphérique, donc 320x480px. Bref, comme avec width=device-width.
Mais la différence est qu’aucune largeur n’est imposée avec initial-scale. Lorsqu’on passe au format paysage, la largeur passe bien à 480px et n’est pas figée à 320px comme avec width=device-width. L’affichage est donc mieux adapté.
Adieu width=device-width ?
A bien y réfléchir, imposer une largeur dans la meta viewport, même de valeur device-width n’est pas vraiment optimal, surtout en changeant d’orientation.
Sans oublier que width=device-width combiné à initial-scale=1.0 provoque des bugs d’affichage sur iOS en orientation paysage…
Il faut bien comprendre que device-width et device-height sont des valeurs fixes, intrinsèques au téléphone. Par exemple, sur iPhone 4 device-width vaut toujours 320px et device-height vaut toujours 480px.
Précisions :
Il est donc peu judicieux d’opter pour une balise meta viewport qui impose la valeur à device-width : ce sera parfait en portrait, mais pas adapté en paysage puisque la valeur devrait correspondre à device-height (480px), on a donc forcément un ratio d’agrandissement de 33%.
Et c’est encore pire sur iPhone 5 puisque device-height vaut 568px, donc cela impliquera un zoom global de 44% !
Et si l’on se contentait tout simplement de préciser la valeur initial-scale ?
<meta name="viewport" content="initial-scale=1.0">
Voici un lien pour pouvoir tester une page uniquement composée de initial-scale, en portrait et en paysage sur votre périphérique si vous le souhaitez : www.mobitest.me
Conclusion :
Cette syntaxe de meta viewport dépourvue de largeur fixée semble résoudre un bon nombre de problèmes d’affichage ou de redimensionnements non souhaités selon l’orientation.
Pour ma part, elle est adoptée à l’unanimité !
