Informations sur l'écran et le navigateur

Voir la résolution d'écran, la taille de fenêtre, le navigateur et les détails de l'appareil en temps réel

Qu'est-ce que c'est et comment ça marche ?

Les informations d'écran — résolution, densité de pixels, ratio de pixels du dispositif, profondeur de couleur, orientation et dimensions du viewport — sont essentielles pour le design web responsive et le débogage des problèmes d'affichage. Un moniteur "2560×1440" avec un ratio de pixels de 2× signifie que le viewport CSS est de 1280×720 pixels.

Cet outil lit les APIs Screen et Window du navigateur pour afficher la résolution, les dimensions du viewport, le DPR, la profondeur de couleur et l'orientation.

Cas d'usage

• Débogage HiDPI : si les images semblent floues sur un MacBook Pro, vérifiez le DPR — généralement 2. Les images doivent être servies en 2× leur taille CSS pour apparaître nettes sur les écrans Retina.
• Test des points de rupture responsive : vérifiez la largeur actuelle du viewport pour valider que vos breakpoints CSS se déclenchent aux bonnes tailles.
• Vérification QA : lorsqu'un client signale un bug de mise en page "sur mobile", obtenez les dimensions exactes de son appareil avec cet outil.

Questions fréquentes

Qu'est-ce que le ratio de pixels du dispositif (DPR) ?

DPR est le rapport entre les pixels physiques et les pixels CSS. DPR de 2 (Retina/HiDPI) = 4 pixels physiques par pixel CSS. Les images à 100px de largeur CSS ont besoin d'une largeur de 200px pour apparaître nettes.

Quelle est la différence entre résolution d'écran et taille du viewport ?

La résolution d'écran est la résolution totale du moniteur en pixels CSS. La taille du viewport est la zone visible du navigateur sans les barres d'outils. Les media queries utilisent les dimensions du viewport.

Qu'est-ce que la profondeur de couleur ?

24 bits (8 bits pour R, G, B) est le standard pour la plupart des écrans, supportant 16,7 millions de couleurs. Pour le webdesign, la profondeur de couleur importe rarement.

Comment tester différentes tailles d'écran sans appareil réel ?

Les devtools du navigateur (F12) → Toggle Device Toolbar permettent de simuler n'importe quelle taille de viewport et DPR avec des presets pour iPhone, iPad, Pixel, Galaxy.

Utilitaires

Générateur de mot de passe · Générateur de QR code · Chronomètre · Minuteur · Calculatrice · Générateur de nombre aléatoire