{"partition": "head_middle", "source_domain": "www.alsacreations.com", "digest": "sha1:O6J4WCUGHG4ACIP2DPJYRWUU3EQIHQJK", "path": "/lustre/fsn1/projects/rech/qgz/uzq54wg/processed_redpajama/base_processing/output/fr/2014-15/000_00023.parquet"}
Aller à la recherche TutorielsAstucesOutilsLivresQuiz Comprendre le Viewport dans le Web mobile
Article par Raphael (Intégrateur du Dimanche, Strasbourg)
Créé le 15 Octobre 2012, mis à jour le 22 Mars 2014 (93716 lectures)
Tags : meta, viewport, mobile, webmobile, responsive, device-width, initial-scale
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" (en vérité le terme juste est "définition").
Par exemple, la surface réelle de quelques terminaux Apple :
320x480px pour l'iPhone 3
640x1136px pour l'iPhone 5
768x1024px pour l'iPad 2
1536x2048px pour l'iPad 3
La surface en "pixels CSS"
Egalement appelée device-width (device-height) ou screen.width (screen.height) 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" ou haute définition. Un "pixel CSS" n'est donc pas égal à un pixel physique.
Par exemple, la surface device-width et device-height en "pixels CSS" (ou "pixels indépendants" DIP) de quelques terminaux Apple (pour ne citer qu'eux) :
Vous vous doutez bien qu'il en est de même pour un grand nombre d'autres terminaux, toutes marques confondues. Pour avoir un panel de périphériques plus important, je vous invite à découvrir http://mydevice.io/devices/ ou encore http://screensiz.es
Attention, les terminaux Apple ont une particularité que n'ont pas les autres mobiles : la valeur de device-width est invariable en portrait et en paysage. Le device-width d'un iPad vaudra toujours 768px quelle que soit l'orientation. Plus de détails dans la partie "Portrait et Paysage" ci-dessous...
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
Android 4 : 980px
Opera mini : 850px
Opera mobile : 980px
Safari mobile : 980px
Internet Explorer mobile : 1024px
Niveau de zoom initial
Compte tenu de ces différentes surfaces, les pages web s'affichent par défaut de manière à ce que toute la surface entre dans celle de l'écran.
Ce niveau de zoom initial correspond à une simple division mathématique de device-width / viewport.
Au final, la surface réelle en pixel n'est pas prise en compte dans le calcul du niveau de zoom d'affichage.
Par exemple, Safari mobile sur iPhone 4 va afficher par défaut les pages web dans une fenêtre de 980px de large au sein des 320px de largeur qu'il croit avoir… bien qu'il en ait physiquement 640px. Le niveau de zoom initial sera de 320 / 980, soit environ 0.326x.
Illustration : site de orange.fr vu par un mobile (opera)
La balise meta viewport
Fort heureusement, pour s'affranchir de ce zoom intempestif rendant les contenus illisibles, il est possible de modifier et d'imposer la taille de la surface du viewport d'un périphérique mobile. Non pas en CSS comme on pourrait le croire, mais en... HTML, à l'aide d'un élément <meta> proposé initialement par Apple.
Les différentes valeurs de cet élément meta et de son attribut content, offrent la possibilité de fixer la largeur de viewport à la valeur souhaitée, voire de l'adapter automatiquem