Responsive design : le viewport

Comme nous l’avions évoqué précédemment lors de l’introduction des Media Queries, ces dernières ne font pas tout dans le responsive design et ainsi, on peut constater que sur pas mal de smartphones (par exemple), les Media Queries ne semblent avoir aucun effet… Ce qui peut paraître étrange et surtout extrêmement gênant : si on fait tout ça, c’est surtout pour les mobinautes, après tout !

Le viewport

Tout peut être expliqué grâce au viewport en fait. Il s’agit de la surface visible, la surface utilisée pour afficher votre site web. Sur un ordinateur classique, il s’agit tout simplement de votre fenêtre de navigateur. Dans ce cas, le viewport est donc facilement compréhensible : redimensionnez votre fenêtre et les Media Queries que vous utilisez feront effet.

Sur un smartphone en revanche, ça se corse. Avec les écrans HD et autres du même genre, nous avons des résolutions tout bonnement hallucinantes sur de petits écrans, avec par exemple une largeur de 720 pixels. Cependant, cette résolution n’est pas celle utilisée par les navigateurs : imaginez un peu des images de 50 x 50 pixels sur de tels écrans… C’est pourquoi nous parlons de device-width (ou device-height) : nous l’avions rapidement évoqué avec les Media Queries, ces dimensions sont en fait celles qui sont utilisées par les applications comme les navigateurs.

Voici donc le mystère de device-width élucidé… Alors on pourrait se dire que les dimensions comme width et height font référence aux dimensions du smartphones réelles, celles indiquées par les constructeurs… Eh bien non, ça serait trop facile ! Ces dimensions correspondent bel et bien aux dimensions du viewport mais celui-ci possède des dimensions spécifiées par les navigateurs eux-mêmes… Et souvent ces dernières sont plus importantes que les dimensions réelles elles-mêmes, ce qui permet d’afficher des sites web dans leur intégralité grâce à un dézoom…

Modifier le viewport

Afin d’avoir un affichage homogène chez tout le monde, il faut donc modifier le viewport, ce qui est rendu possible grâce à une balise meta un peu spéciale (proposée à la base par Apple mais adoptée par un grand nombre de navigateurs). Comme toute balise meta, celle-ci se place dans le head de vos pages et se présente comme ceci :

La valeur à indiquer dépend de ce que vous voulez faire. Vous pouvez par exemple spécifier une largeur fixe : tous les navigateurs qui gèrent cette balise imposeront un viewport de la largeur indiquée. Cela se fait de cette manière :

Ce n’est qu’un exemple, bien évidemment vous pouvez indiquer la valeur que vous souhaitez. Ça ne paraît pas très pratique et ça ne l’est pas effectivement, sauf dans des cas spécifiques… C’est pourquoi vous pourrez aussi définir la largeur comme étant égale à la largeur du terminal lui-même :

Cela permettra donc d’avoir des Media Queries ayant le même effet partout. Bien sûr, ça paraît pratique… sauf si le terminal passe en mode paysage où largeur et hauteur sont inversées !

C’est pourquoi nous pouvons agir sur un autre plan : le niveau de zoom. En imposant ce zoom à 1, le navigateur mobile ne dézoomera pas, ce qui aura pour effet de donner le même rendu chez tout le monde (au niveau du viewport). Très pratique donc, puisqu’il sera inutile de spécifier plein de Media Queries pour avoir un bon résultat : seules celles concernant largeur (width) et hauteur (height) pourront être suffisantes.

Bien sûr, si le cœur vous en dit, rien ne vous interdit d’indiquer une autre valeur de zoom initial. Rien qu’avec tout ce que nous avons dit, vous devriez vous dire qu’il est préférable d’utiliser le zoom initial. Mais on peut également citer un autre avantage ce cette méthode. En effet, vous aurez peut-être remarqué avec les autres façons de faire que certains éléments comme les champs de saisie sont extrêmement petits par rapport au reste de la page… Non seulement ce n’est pas très esthétique mais c’est en plus très peu pratique. En indiquant un zoom initial de 1.0, cet inconvénient est enrayé.

Et en CSS ?

Qui dit balise proposée par Apple dit balise non standard et propriétaire. Le standard existe, en réalité, mais est assez récent et se situe côté CSS :

@viewport {
	zoom: 1;
}

Bien sûr, vous pouvez aussi spécifier la largeur du viewport avec cette spécification :

@viewport {
	width: device-width;
}

Attention cependant, ce n’est pas encore implémenté chez tout le monde, loin de là donc il est conseillé de continuer à utiliser la balise meta en attendant…

Et maintenant ?

Vous avez tous les outils en main pour rendre votre design responsive, à vous de jouer !