Quelle est la résolution de mon écran ? – Taille et ratio de pixels
Voyez la résolution de votre écran, le vrai nombre de pixels physiques, le ratio de pixels, la taille de la fenêtre du navigateur et plus — mesurés en direct pendant le redimensionnement.
La résolution s’affiche en haut en pixels CSS, avec la résolution physique juste en dessous (pixels CSS × ratio de pixels). Par exemple, un portable affichant 1440 × 900 avec un ratio de 2 a une dalle de 2880 × 1800. La taille de la fenêtre se met à jour quand vous la redimensionnez.
Comment utiliser : Résolution d’écran
- Ouvrez la page : la résolution est détectée automatiquement.
- Lisez la taille d’écran et les pixels physiques.
- Regardez le ratio de pixels pour savoir si votre écran est haute densité.
- Redimensionnez le navigateur pour voir la taille de la fenêtre changer.
- Déplacez la fenêtre sur un autre écran pour comparer.
Pixels CSS et pixels physiques
Les écrans modernes contiennent plus de pixels sur la même surface, donc le système agrandit tout pour garder un texte lisible. Les navigateurs donnent les tailles en « pixels CSS » (la taille mise à l’échelle) et le ratio de pixels de l’appareil (DPR) indique combien de pixels physiques compose chaque pixel CSS.
| Exemple | Taille CSS | DPR | Physique |
|---|---|---|---|
| Écran Full HD | 1920 × 1080 | 1 | 1920 × 1080 |
| Portable à 150 % | 1280 × 720 | 1,5 | 1920 × 1080 |
| MacBook Air 13" | 1440 × 900 | 2 | 2880 × 1800 |
| Smartphone récent | 390 × 844 | 3 | 1170 × 2532 |
La valeur physique peut légèrement varier si la mise à l’échelle n’est pas un nombre entier, car le navigateur arrondit la taille CSS.
Écran, fenêtre et zone disponible
- Résolution d’écran : l’écran entier.
- Écran disponible : l’écran sans la barre des tâches ou le Dock.
- Fenêtre du navigateur (viewport) : la zone réellement utilisable par une page. C’est le chiffre qui compte pour le design responsive.
Le zoom de la page modifie aussi la taille de la fenêtre et le ratio de pixels : réinitialisez-le (Ctrl/Cmd + 0) pour des valeurs exactes.
Fréquence de rafraîchissement
L’outil l’estime en comptant combien d’images le navigateur dessine. Les valeurs courantes sont 60, 90, 120 ou 144 Hz. L’économie d’énergie, un onglet en arrière-plan ou un ordinateur chargé peuvent faire baisser l’estimation. Consultez les réglages d’affichage pour la valeur exacte.
Profondeur de couleur
La plupart des écrans indiquent 24 bits (8 bits par canal, 16,7 millions de couleurs). Les écrans HDR peuvent indiquer 30 bits.
À quoi ça sert
- Choisir la bonne taille pour un fond d’écran ou une capture.
- Vérifier qu’un nouvel écran fonctionne à sa résolution native.
- Aider le support ou un développeur à reproduire un problème d’affichage.
- Choisir la taille des images : un écran 2× demande des images deux fois plus grandes que leur taille CSS pour rester nettes ; préparez-les avec l’Redimensionner une image.
Rien n’est envoyé : toutes les valeurs sont lues par votre navigateur. Les informations de votre navigateur sont sur la page Quel est mon user agent ?.
Ces outils gratuits peuvent aussi vous être utiles : Test clavier, Test manette et Quel est mon user agent ?.
Questions fréquentes
Quelle est la résolution de mon écran ?
Elle s’affiche en haut de cette page. La première valeur est en pixels CSS ; la résolution physique est cette valeur multipliée par le ratio de pixels.
Qu’est-ce que le ratio de pixels ?
C’est le nombre de pixels physiques qui forment un pixel CSS : 1 sur un écran classique, 2 ou 3 sur un écran Retina ou un smartphone.
Pourquoi ma résolution est-elle plus petite que celle annoncée ?
La mise à l’échelle (125 % ou 150 %) réduit la taille CSS. Multipliez par le ratio de pixels pour obtenir la taille physique.
Qu’est-ce que la taille de la fenêtre du navigateur ?
C’est la zone du navigateur qu’une page peut utiliser, aussi appelée viewport.
La fréquence de rafraîchissement est-elle exacte ?
C’est une estimation basée sur les images dessinées. Consultez les réglages d’affichage pour la valeur exacte.
Dernière mise à jour: