Comment utiliser : Ma résolution d'écran
- Ouvrez la page : les valeurs s’affichent immédiatement.
- Redimensionnez la fenêtre ou faites pivoter votre téléphone pour voir le viewport changer.
- Copiez les informations pour les partager dans un rapport de bug.
Résolution d'écran et viewport
- La résolution d'écran correspond à la taille de l’ensemble de l’affichage en pixels CSS (
screen.width × screen.height). - Le viewport correspond à la zone de la fenêtre du navigateur disponible pour la page (
innerWidth × innerHeight) ; ce sont ces valeurs que utilisent les media queries CSS. - Le ratio de pixels de l’appareil (DPR) indique le nombre de pixels physiques par pixel CSS. Un téléphone avec un DPR de 3 et un viewport de 390 pixels de large possède en réalité 1170 pixels physiques en largeur.
Tailles d'écran courantes
| Type d’appareil | Viewport CSS | DPR |
|---|---|---|
| iPhone récent | 390–430 × 844–932 | 3 |
| Téléphone Android | 360–412 × 780–915 | 2,6–3,5 |
| iPad | 768–1032 × 1024–1376 | 2 |
| Ordinateur portable | 1280–1536 × 720–960 | 1–2 |
| Écran Full HD | 1920 × 1080 | 1 |
| Écran 4K (mis à l’échelle) | 1920–2560 × 1080–1440 | 1,5–2 |
Pourquoi les chiffres semblent « faux »
Les systèmes d’exploitation mettent l’affichage à l’échelle : un écran 4K réglé à 150 % affiche 2560 × 1440 pixels CSS avec un DPR de 1,5. Le zoom du navigateur modifie lui aussi le DPR : à 200 %, le viewport est divisé par deux. Ce comportement est normal et ne constitue pas une erreur.
Pour les développeurs
Concevez avec des pixels CSS et testez les largeurs de viewport courantes (360, 390, 768, 1024, 1280, 1536). Servez des images nettes aux écrans à DPR élevé avec srcset et redimensionnez-les avec le redimensionneur d’images. La typographie fluide avec le calculateur clamp() permet de se passer de breakpoints pour les tailles de police.
Aussi recherché comme : taille d'écran, taille du viewport, quelle est ma résolution, ratio de pixels de l'appareil, taille de la fenêtre du navigateur, vérifier la résolution d'écran, device pixel ratio.
Outils complémentaires : Ma résolution d'écran
- Quelle est mon adresse IP ? — Votre adresse IP publique et toutes les informations que votre navigateur communique aux sites web que vous visitez : agent utilisateur, résolution d'écran, langue, fuseau horaire et en-têtes de requête.
- Analyseur User Agent — Décodez n'importe quelle chaîne User-Agent pour identifier le navigateur, le moteur, le système d'exploitation et l'appareil, et vérifiez si elle provient d'un moteur de recherche, d'un crawler IA ou d'un script.
- Calculateur de ratio d’aspect — Redimensionnez images et vidéos sans déformation : indiquez un ratio et un côté pour obtenir l’autre, ou saisissez une taille pour trouver son ratio, avec un CSS prêt à coller.
- Convertisseur PX en REM — Convertissez entre pixels, rem et em avec votre propre taille de police racine, ou collez une feuille de style entière pour convertir toutes les valeurs px d’un coup.
Questions fréquentes
Pourquoi mon écran 4K affiche-t-il une résolution plus petite ?
C’est dû à la mise à l’échelle de l’affichage : Windows et macOS agrandissent tous les éléments, donc le navigateur indique la taille mise à l’échelle en pixels CSS. Multipliez-la par le ratio de pixels de l’appareil pour obtenir la résolution physique.
Quelle est la différence entre la taille de l'écran et le viewport ?
Le viewport exclut les barres d’outils, les onglets et les bordures de la fenêtre du navigateur : il correspond à l’espace réellement disponible pour la page web.
Ces informations sont-elles envoyées quelque part ?
Non. Elles sont lues par votre navigateur et affichées uniquement sur cette page.
Puis-je installer Ma résolution d'écran en tant qu’application web et l’utiliser hors ligne ?
Oui. Ma résolution d'écran est une application web installable (PWA) : elle s’installe depuis votre navigateur, sans passer par une boutique d’applications. Cliquez sur « Installer l’application » en haut de cette page dans Chrome ou Edge (Windows, macOS, Linux, ChromeOS) ; sur Android, utilisez « Partager » → « Ajouter à l’écran d’accueil » sur iPhone et iPad ; ou « Fichier » → « Ajouter au Dock » dans Safari 17+ sur Mac. L’application s’ouvre alors dans sa propre fenêtre avec sa propre icône, et comme elle s’exécute entièrement dans votre navigateur, elle continue de fonctionner hors ligne. Firefox sur ordinateur de bureau ne permet pas d’installer d’applications web. Comment fonctionne l’installation.