Configurer la fenêtre d'affichage

Cette règle se déclenche lorsque les analyses PageSpeed Insights indiquent que votre page ne spécifie pas de fenêtre d'affichage, ou spécifie une fenêtre d'affichage qui ne s'adapte pas à des appareils différents.

Présentation

L'affichage d'une page Web sur un appareil mobile est contrôlé par une fenêtre d'affichage. Sans fenêtre d'affichage, les appareils mobiles affichent la page comme sur un écran d'ordinateur, en la mettant à l'échelle pour qu'elle s'adapte à l'écran. Définir une fenêtre d'affichage permet de contrôler la largeur d'une page et sa mise à l'échelle sur différents appareils.

À gauche : une page sans fenêtre d'affichage Meta.
À droite : une page avec une fenêtre d'affichage adaptée à la largeur de l'appareil.

Recommandations

Il est conseillé d'inclure dans les pages optimisées pour les appareils mobiles une fenêtre d'affichage Meta dans l'en-tête du document spécifiant "width=device-width, initial-scale=1".

<meta name=viewport content="width=device-width, initial-scale=1">

Informations complémentaires

Termes

  • Pixel matériel : un pixel physique à l'écran. Par exemple, un iPhone 5 possède un écran avec 640 pixels matériels horizontaux.
  • Pixel indépendant des appareils (Device-independent pixel, dip) : une mise à l'échelle des pixels de l'appareil pour correspondre à un pixel de référence uniforme avec un éloignement d'écran normal, qui doit faire à peu près la même taille sur tous les appareils. Un iPhone 5 mesure 320 dips de large.
  • Pixel CSS : l'unité utilisée pour la mise en page, contrôlée par la fenêtre d'affichage. Les dimensions en pixels dans les styles comme "width: 100px" sont indiquées en pixels CSS. Le rapport entre les pixels CSS et les pixels indépendants des appareils constitue le facteur d'échelle ou de zoom de la page.

Pages pour ordinateur sur les appareils mobiles

Lorsqu'une page ne spécifie pas de fenêtre d'affichage, les navigateurs pour mobile l'affichent avec une création de remplacement de largeur allant de 800 à 1 024 pixels CSS. Le facteur d'échelle de la page est ajusté de sorte que cette dernière s'adapte à l'écran, obligeant les internautes à zoomer avant de pouvoir interagir avec elle.

Balise de fenêtre d'affichage Meta

Une balise de fenêtre d'affichage Meta donne au navigateur des instructions sur la façon de contrôler les dimensions et la mise à l'échelle de la page, et doit figurer dans l'en-tête du document.

Fenêtre d'affichage à largeur fixe

Il est possible de définir une largeur spécifique pour la fenêtre d'affichage, par exemple "width=320" ou "width=1024". Bien que déconseillée, cette solution de dépannage peut vous permettre de vous assurer que les pages aux dimensions fixes s'affichent comme prévu.

Fenêtre d'affichage adaptative

L'utilisation de la valeur de la fenêtre d'affichage Meta "width=device-width" indique à la page de s'adapter à la largeur de l'écran en pixels indépendants. Cela permet l'ajustement du contenu afin qu'il s'adapte à différentes tailles d'écrans.

Certains navigateurs, y compris sur iOS et Windows Phone, sont conçus pour garder la même largeur de page lors du passage en mode paysage et pour zoomer plutôt que réajuster la page à l'écran. Ajouter l'attribut "initial-scale=1" indique aux navigateurs d'établir une relation de 1:1 entre les pixels CSS et les pixels indépendants, quelle que soit l'orientation de l'appareil. La page peut ainsi s'afficher sur toute la largeur du mode paysage.

vs
À gauche : une rotation d'iPhone 5 avec "width=device-width", qui aboutit à une largeur de 320 px en mode paysage.
À droite : une rotation d'iPhone 5 avec "width=device-width, initial-scale=1", qui aboutit à une largeur de 568 px en mode paysage.

Pour pouvoir utiliser une fenêtre d'affichage adaptative, les pages doivent être lisibles dans différentes largeurs. Lisez nos recommandations permettant d'adapter la taille du contenu à la fenêtre d'affichage.

Autres considérations

Évitez "minimum-scale", "maximum-scale", "user-scalable"

Bien qu'il soit possible de définir des valeurs de zoom minimale et maximale, ou même de désactiver le zoom manuel dans la fenêtre d'affichage, ces options nuisent à l'accessibilité et sont généralement déconseillées.

@viewport

La balise de la fenêtre d'affichage Meta, bien que largement acceptée, n'est pas une norme formelle. Son utilisation figure dans la spécification adaptation d'appareils aux feuilles de style CSS. Jusqu'à ce que cette spécification soit finalisée et largement mise en œuvre, les auteurs doivent continuer à utiliser la balise de la fenêtre d'affichage Meta à des fins de compatibilité, seule ou avec les styles "@viewport" correspondants.

Ressources :