Mode d’emploi

Ouvrez la page. Les valeurs sont lues immédiatement dans votre navigateur.
Redimensionnez la fenêtre ou faites pivoter votre appareil pour voir la zone d’affichage et l’orientation se mettre à jour.
Utilisez « Tout copier » pour coller les détails dans un rapport de bug ou une demande d’assistance.

Fonctionnement

Les navigateurs indiquent les dimensions en pixels CSS, l’unité utilisée par les pages web pour la mise en page. Sur les écrans à haute densité, un pixel CSS est affiché avec plusieurs pixels physiques : le ratio de pixels de l’appareil (DPR) indique combien. Un téléphone qui indique 390 × 844 avec un DPR de 3 possède une dalle d’environ 1170 × 2532 pixels physiques. Sur ordinateur, le zoom du navigateur et la mise à l’échelle de l’affichage du système d’exploitation modifient tous deux le DPR et la taille CSS. Ainsi, un écran de 2560 × 1440 avec une mise à l’échelle de 125 % indique 2048 × 1152.

La résolution de l’écran correspond à l’affichage entier ; l’espace disponible exclut les barres permanentes du système d’exploitation, comme la barre des tâches de Windows ou la barre des menus de macOS ; la zone d’affichage (viewport) est la partie de la fenêtre du navigateur où la page est affichée, sans les barres d’outils, mais avec toute barre de défilement. C’est à la zone d’affichage que répondent les media queries CSS telles que min-width: 768px ; c’est donc la valeur à vérifier pour tester les mises en page adaptatives.

Les valeurs de schéma de couleurs et de réduction des animations proviennent des mêmes fonctionnalités média CSS que les sites web utilisent pour s’adapter aux réglages de votre système. Les marques, la plateforme et les informations sur l’appareil mobile proviennent des User-Agent Client Hints, disponibles uniquement dans les navigateurs basés sur Chromium. Certains navigateurs arrondissent ou figent volontairement ces valeurs pour limiter l’empreinte numérique ; elles peuvent donc ne pas correspondre exactement à votre matériel.

Exemples

Tester une mise en page adaptative

Une mise en page ne fonctionne pas sur l’ordinateur portable d’un collègue. Il vous envoie les détails, qui indiquent une zone d’affichage de 1280 × 649 avec un DPR de 1,5. Réglez la barre d’outils des appareils de votre navigateur sur la même zone d’affichage pour reproduire le problème.

Choisir les tailles d’image

Une image de produit est affichée sur 400 pixels CSS de large. Sur un téléphone avec un DPR de 3, elle doit faire 1200 pixels pour rester nette ; vous savez ainsi quelles tailles inclure dans srcset.

Vérifier la mise à l’échelle de l’écran

Un écran de 3840 × 2160 indique 2560 × 1440 avec un DPR de 1,5 : Windows met l’affichage à l’échelle de 150 %.

Foire aux questions

Pourquoi la résolution de l’écran diffère-t-elle de celle indiquée par le fabricant ?

Les navigateurs indiquent les pixels CSS, obtenus en divisant les pixels physiques par le facteur de mise à l’échelle. Multipliez cette valeur par le ratio de pixels de l’appareil pour obtenir une approximation de la résolution matérielle. Le zoom du navigateur modifie également la valeur indiquée.

Quelle est la différence entre la taille de l’écran et celle de la zone d’affichage ?

La taille de l’écran correspond à l’affichage entier. La zone d’affichage est uniquement la partie de la fenêtre du navigateur où la page est rendue ; elle est donc plus petite et change lorsque vous redimensionnez la fenêtre ou ouvrez les outils de développement.

Ces informations servent-elles à me suivre ?

Pas par cette page : les valeurs sont affichées uniquement pour vous et ne sont ni enregistrées ni envoyées. Les sites web peuvent lire ces mêmes valeurs ; c’est pourquoi certains navigateurs les arrondissent pour compliquer l’empreinte numérique.

Pourquoi la prise en charge du tactile est-elle indiquée sur mon ordinateur portable ?

La prise en charge du tactile dépend du nombre de points de contact indiqué par le navigateur. Les ordinateurs portables à écran tactile les indiquent même si vous utilisez principalement une souris, et certains pilotes ou environnements de bureau à distance signalent la prise en charge du tactile sans écran tactile.

Confidentialité

Toutes les valeurs sont lues par JavaScript dans votre navigateur et affichées uniquement pour vous. Rien n’est enregistré, envoyé ni inclus dans les statistiques ; seul un événement anonyme indiquant que l’outil a été ouvert et utilisé est enregistré.