Comprendre le Viewport dans le Web mobile

Le Viewport désigne schématiquement la surface de la fenêtre du navigateur. Cependant, la notion de viewport sur un appareil mobile est différente de celle sur un écran de bureau : sur mobile, le navigateur ne dispose pas de « fenêtre » réelle, ni de barres de défilement car tout est prévu pour naviguer de manière tactile.

Comprendre la notion de viewport est absolument indispensable dans un projet d’intégration de site web pour tablettes et smartphones, ou dans un esprit d’adaptation « Responsive Web Design ».

Les différentes surfaces d’un mobile

Afin de mieux cerner et exploiter le concept de viewport sur terminaux nomades, il nous faut commencer par maîtriser deux notions de base : la surface réelle et la surface en « pixels CSS » des mobiles.

La surface réelle

C’est le nombre physique de pixels qui composent la matrice de l’écran, telle que le constructeur le décrit dans les caractéristiques, en gros la « résolution ».

Par exemple, la surface réelle de quelques terminaux Apple :

• 320x480px pour l’iPhone 3
• 480x960px pour l’iPhone 4
• 480x1136px pour l’iPhone 5
• 768x1024px pour l’iPad 2
• 1536x2048px pour l’iPad 3

La surface en « pixels CSS »

Egalement appelée device-width ou screen.width ou encore « ça dépend », il s’agit du nombre de pixels virtuels que le terminal pense avoir et sur lequel il fonde son affichage.
Le hic est que cette surface ne correspond pas toujours à la surface réelle, notamment pour les mobiles dits « retina ». Un « pixel CSS » n’est donc pas égal à un pixel physique.

Par exemple, la surface device-width en « pixels CSS » de quelques terminaux Apple (pour ne citer qu’eux) :

• 320x480px pour l’iPhone 3
• 320x480px pour l’iPhone 4
• 320x568px pour l’iPhone 5
• 768x1024px pour l’iPad 2
• 768x1024px pour l’iPad 3

Vous vous doutez bien qu’il en est de même pour un grand nombre d’autres terminaux, toutes marques confondues.

Viewport : les mobiles mentent !

Suite à cette introduction aux différentes tailles des mobiles particulièrement déroutante, je vous suggère de continuer à vous accrocher… parce que la notion de viewport est loin d’être une évidence non-plus !

Pour débuter en douceur, apprenez que par défaut la taille du viewport d’un terminal mobile ne correspond ni à la taille de son écran réelle ni celle en « pixels CSS ».
Elle est généralement bien supérieure à la surface physique, afin de pouvoir y caler n’importe quelle page web en lui affectant un niveau de (dé)zoom.

Autre surprise, la valeur initiale du viewport ne dépend pas du terminal, comme on pourrait le supposer, mais… du navigateur mobile (et peut parfois même être modifiable par l’utilisateur dans ses réglages).

Voici quelques valeurs par défaut :

• Android 1, 2 et 3 : 800px
• Andro…

Auteur : Raphael