Quelle est ma résolution d’écran ?
Quelle résolution a mon écran – et quel espace une page web obtient-elle réellement dans la fenêtre du navigateur ? Toutes les valeurs sont mesurées directement dans votre navigateur et se mettent à jour en direct lorsque vous redimensionnez la fenêtre, zoomez ou faites pivoter votre appareil.
Comment le calcul est fait
Il n’existe pas qu’une seule bonne réponse à « quelle est ma résolution d’écran » : les pixels physiques de l’écran, les pixels CSS avec lesquels travaille le navigateur, et le viewport – l’espace qu’une page web obtient réellement. Cet outil affiche les trois côte à côte.
Ce que signifient les valeurs
- Pixels physiques : taille de l’écran en pixels CSS × devicePixelRatio. Un ordinateur portable Full HD à 125 % de mise à l’échelle annonce 1536 × 864 pixels CSS – × 1,25 donne les 1920 × 1080 réels.
- devicePixelRatio : le nombre de pixels physiques qui composent un pixel CSS. 1 = écran classique, 2 ou 3 = écran Retina ou de téléphone. Le zoom du navigateur et la mise à l’échelle de l’affichage Windows modifient tous deux cette valeur.
- Disponible : l’écran moins la barre des tâches ou le Dock.
- Viewport : la taille intérieure de la fenêtre du navigateur (
innerWidth × innerHeight) – c’est à cela que réagissent les media queries et les mises en page adaptatives. La zone visible (visual viewport) est plus petite sur téléphone lorsque vous zoomez avec deux doigts ou que le clavier est ouvert. - Format d’image : réduit exactement (1920 × 1080 = 16:9) et, pour les valeurs impaires, le nom courant (1366 × 768 ≈ 16:9).
- Breakpoint : quel palier de Bootstrap 5 (sm à partir de 576, md à partir de 768, lg à partir de 992, xl à partir de 1200, xxl à partir de 1400 px) et de Tailwind CSS (sm à partir de 640, md à partir de 768, lg à partir de 1024, xl à partir de 1280, 2xl à partir de 1536 px) s’applique à la largeur de fenêtre actuelle.
Résolutions courantes
| Nom | Pixels | Ratio |
|---|---|---|
| HD (720p) | 1280 × 720 | 16:9 |
| HD / WXGA | 1366 × 768 | ≈ 16:9 |
| Full HD (1080p) | 1920 × 1080 | 16:9 |
| WUXGA | 1920 × 1200 | 16:10 |
| QHD / WQHD (1440p) | 2560 × 1440 | 16:9 |
| UWQHD | 3440 × 1440 | ≈ 21:9 |
| 4K UHD | 3840 × 2160 | 16:9 |
Limites
Les navigateurs arrondissent parfois les pixels CSS vers le bas, si bien que les pixels physiques peuvent être décalés d’une unité (2561 au lieu de 2560). Avec plusieurs écrans, le navigateur signale celui sur lequel se trouve actuellement la fenêtre. Firefox avec la protection contre le fingerprinting activée (resistFingerprinting) peut volontairement annoncer des valeurs standard.
Questions fréquentes
Comment connaître ma résolution d’écran ?
Ouvrez simplement cette page : la résolution en pixels physiques s’affiche en haut, suivie des valeurs en pixels CSS et de la taille de votre fenêtre de navigateur. Sous Windows, vous la trouvez aussi dans Paramètres → Système → Affichage → Résolution d’affichage.
Pourquoi mon navigateur affiche-t-il 1536 × 864 au lieu de 1920 × 1080 ?
Parce que Windows est mis à l’échelle à 125 % (ou que le zoom du navigateur n’est pas à 100 %). Le navigateur travaille alors en pixels CSS : 1920 ÷ 1,25 = 1536. Les pixels physiques sont affichés en haut – ce sont les pixels CSS × devicePixelRatio.
Quelle est la différence entre résolution d’écran et viewport ?
La résolution d’écran est la taille de tout l’affichage. Le viewport n’est que la zone intérieure de la fenêtre du navigateur, sans barre d’onglets, barre d’adresse ni barre des tâches. Pour le design web et les media queries, c’est le viewport qui compte.
Que signifie un devicePixelRatio de 2 ou 3 ?
Votre écran est haute densité (Retina) : un pixel CSS est composé de 2 × 2 ou 3 × 3 pixels physiques. Le texte et les images paraissent plus nets, tandis que les mises en page conservent la même taille.
Mes données sont-elles stockées ?
Non. Toutes les valeurs sont lues et affichées uniquement dans votre navigateur ; rien n’est envoyé ni stocké.
Sources et références juridiques
- MDN Web Docs – Screen
- MDN Web Docs – Window.devicePixelRatio
- MDN Web Docs – Visual Viewport API
- MDN Web Docs – prefers-color-scheme
- Bootstrap 5.3 – Breakpoints
- Tailwind CSS – Responsive design
Dernière mise à jour :
Outils similaires
- Quel est mon user agent ?Affichez votre user agent et détectez navigateur, version, moteur, OS et type d’appareil, plus les Client Hints. Analysez aussi un autre user agent. En local.
- Quelle est mon adresse IP ?Affiche instantanément votre adresse IP publique, détecte IPv4 ou IPv6 et explique la différence. Gratuit – votre IP n’est pas stockée.
- Test webcam : vérifiez votre caméraTest webcam gratuit dans le navigateur : image en direct, résolution et fréquence réelles, de 480p à 4K, miroir, photo. Aucun envoi en ligne.
- Test clavier : toutes les touches fonctionnent-elles ?Testez votre clavier en ligne : chaque touche pressée s’allume, les touches testées restent marquées. Avec key/code et un test de ghosting. Gratuit.
- Vérifier et calculer une clé de LuhnVérifiez un numéro avec l’algorithme de Luhn (modulo 10, ISO/IEC 7812-1) ou calculez sa clé – simple contrôle de format, en local dans le navigateur.
- Associer des polices – duos pour titres et texte courantDuos de polices pour titres et texte courant avec aperçu en direct, CSS à copier et disponibilité sur Windows, Mac, iPhone et Android – sans police web.