Viewport : adieu width=device-width ?

EDIT 21/10/2013.

Suite à des tests et des bugs découverts sur Windows Phone 8, la conclusion de cet article est remise en question.

Il semble finalement que la syntaxe la plus robuste sur tous les devices quelle que soit leur orientation soit celle-ci :

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

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.

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.

Il faut bien comprendre que sur Apple 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 quelle que soit l’orientation.

Un article complet sur Alsacréations détaille toutes les subtilités des valeurs du Viewport.

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 ?

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.mydevice.io

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é !