La balise meta viewport

Avant d’étudier les Media Queries et la création de design responsives en profondeur, il est important de comprendre le rôle de la balise <meta name= "viewport">.

 

L’élément HTML meta

L’élément HTML meta est utilisé pour définir des métadonnées pour un document HTML.

Une métadonnée est une donnée qui ne va pas être affiché sur la page mais qui va pouvoir servir aux différents robots pour comprendre et afficher la page.

On va pouvoir ajouter différents attributs à l’élément meta qui vont nous servir à spécifier différents types de données.

Les attributs les plus courants de l’élément meta vont être les attributs charset, name et content.

Nous connaissons déjà l’attribut charset qui sert à indiquer le jeu de caractères ou l’encodage de notre document. Cet attribut va notamment permettre aux navigateurs d’utiliser le bon jeu de caractères et d’afficher correctement les caractères de notre page et notamment les accents et autres caractères spéciaux comme les cédilles et etc.

L’attribut name va nous permettre d’indiquer le type de métadonnées que l’on souhaite passer. Cet attribut va aller de pair avec l’attribut content qui va lui nous permettre de passer une métadonnée en soi.

L’attribut name va notamment pouvoir prendre les valeurs suivantes :

  • author : la valeur passée à content sera considérée comme étant le nom de l’auteur du document ;
  • description : la valeur passée à content pourra être utilisée par les moteurs de recherche comme extrait pour décrire le sujet de notre page ;
  • viewport : la valeur passée à content va nous permettre d’indiquer comment le navigateur doit afficher la page sur différents appareils.

 

Le viewport et les problèmes d’affichage sur mobile

Le viewport représente de manière schématique la partie visible d’une page web par un utilisateur ou la fenêtre active.

La taille de cette fenêtre va bien évidemment varier en fonction de la taille de l’écran de l’utilisateur et de l’appareil utilisé.

Le problème qui s’est posé avec les smartphones est que la taille du viewport, c’est-à-dire la taille de la fenêtre d’affichage des pages web va souvent être différente de la taille physique des écrans.

En effet, la plupart des smartphones utilisent un viewport plus grand que la taille réelle de leur écran afin d’éviter aux utilisateurs d’avoir à dézoomer dans le cas où ils consulteraient un site non optimisé pour une navigation sur mobile.

Ainsi, imaginons par exemple qu’un smartphone utilise un viewport de 980px de large. Le site va donc s’afficher dans cette fenêtre. Seulement, notre smartphone n’a une taille réelle d’écran que de 400px.

Bien évidemment, ici, le viewport ne va pas dépasser de l’écran physique mais va être recadré pour s’afficher dans l’écran. Ainsi, notre site va apparaitre comme dézoomé, puisque le niveau de zoom sera de 400 / 980 = 0,41x.

Le vrai problème ici est tous les smartphones et les navigateurs mobiles n’utilisent pas les mêmes tailles de viewport ni les mêmes ratios. Ainsi, nos pages vont apparaitre plus ou moins dézoomées selon les appareils utilisés.

La balise meta name= "viewport" a été créée pour nous permettre de reprendre le contrôle du viewport et notamment de sa taille et de son échelle afin de proposer la meilleure version de notre site pour les différents appareils.

 

La balise meta name= »viewport »

La balise meta name= "viewport" va permettre de donner des instructions relatives à la taille et à l’échelle du viewport aux navigateurs mobiles afin que les différents éléments d’une page s’affichent au mieux.

Nous allons pouvoir passer plusieurs propriétés à l’attribut content.

Les propriétés width et height vont nous permettre de contrôler la taille du viewport dans lequel notre page doit s’afficher. On peut leur passer un nombre ou le mot clef device-width qui correspond à la taille de l’écran en pixels CSS à l’échelle 100%.

Ici, il me semble intéressant de définir ce qu’est « un pixel CSS ». Les pixels CSS correspondent à la surface utilisable de l’écran. Ce sont des pixels virtuels que l’appareil « pense » avoir. L’idée importante ici est qu’un pixel CSS n’est pas toujours égal à un pixel physique.

Les pixels physiques correspondent aux pixels réels qui composent un écran. C’est également ce qu’on appelle la définition d’un écran. Les écrans retina et haute définition possèdent généralement 4 fois plus de pixels réels que de pixels CSS.

La propriété user-scalable permet à l’utilisateur de zoomer dans la page (avec la valeur yes) ou, au contraire, lui interdit de la faire (avec la valeur no).

Cette propriété est souvent utilisée avec les propriétés minimum-scale et maximum-scale auxquelles on va pouvoir passer un nombre entre 0 et 10 et qui va représenter le niveau de dézoom ou de zoom que l’utilisateur est autorisé à faire.

Finalement, la propriété initial-scale permet de définir de niveau de zoom initial du viewport, c’est-à-dire son échelle. Nous allons également pouvoir lui passer un nombre entre 0 et 10.

 

Définir le meta viewport : quelles valeurs choisir ?

Si vous avez suivi jusque-là, vous devriez avoir compris qu’il est essentiel de définir une balise meta name= "viewport" ave des propriétés et des valeurs adaptées afin que les différents navigateurs mobiles ne définissent pas eux-mêmes leur propre viewport et leur niveau de zoom de notre page.

Généralement, nous définirons une largeur de viewport égale à la largeur de l’appareil dans le viewport ainsi qu’un niveau de zoom initial égal à 1 et interdirons les utilisateurs de zoomer ou de dézoomer. Nous allons donc utiliser la balise suivante : .

Utilisation du meta viewport pour modifier la page HTML en fonction de l'appareil utilisé

Laisser un commentaire