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 !
7 commentaires
[…] Responsive design : le viewport From http://www.tassedecafe.org – Today, 5:53 PM […]
[…] Sans oublier les articles sur l’indispensable balise « viewport » comme celui de Vincent De Oliveira et celui de Jeremy […]
[…] I did some extensive research and came up with a list of 60 plus responsive navigation bar tutorials, examples, and demos from all across the Internet. Responsive design : le viewport. […]
[…] Configuration ViewPort : cette balise permet aux navigateurs d’afficher la page à l’échelle selon le type de navigateur. Autrement dit, mieux vaut qu’elle soit optimisée pour afficher la bonne mise en page de votre site. Cela concerne aussi bien la balise méta, que la largeur fixe ou encore le redimensionnement du contenu Pour plus d’explications, consultez également l’article du blog Tasse de Café « Responsive Design : le viewport » […]
[…] Configuration ViewPort : cette balise permet aux navigateurs d’afficher la page à l’échelle selon le type de navigateur. Autrement dit, mieux vaut qu’elle soit optimisée pour afficher la bonne mise en page de votre site. Cela concerne aussi bien la balise méta, que la largeur fixe ou encore le redimensionnement du contenu. Pour plus d’explications, consultez également l’article du blog Tasse de Café « Responsive Design : le viewport » […]
[…] Le protocole Open Graph a été crée à l'origine par Facebook et est désormais géré par l'Open Web Fondation. Quelle est l'impact de l'Open Graph sur le SEO ? En théorie, l'impact de l'Open Graph sur le SEO est limité. En pratique cependant, les réseaux sociaux comme Facebook ont pris une telle importance depuis quelques années que les moteurs de recherche ne peuvent pas ignorer les données de l'Open Graph dans leurs algorithmes. Responsive design : le viewport. […]
[…] For someone to read this section they'd have to scroll down along the first column, then back up to the start of the next to read the rest.The second section is split into two equal-height columns too, but there's only two sentences, so it looks awkward; there's not really enough content to justify a second column the user has to read across. In my answer I decided to add a code pen to show the exact process, and then went on to explain how I came about to the solution. Advanced Responsive Design Techniques. Ish. yet another viewport resizer. Am I Responsive? Responsive Design Knowledge Hub. Responsive design : le viewport. […]