Quelle est ma résolution d'écran ?

Vos caractéristiques d'affichage, détectées instantanément — sans passer par les paramètres

Testeur de viewport responsive

Sélectionnez une largeur prédéfinie pour voir comment le contenu s'adapte à différentes largeurs de viewport. Le badge de taille se met à jour en direct.

Pleine largeur
— px de large pour ce préréglage
Note : les iframes cross-origin sont bloquées par la plupart des sites. Ce cadre d'aperçu simule uniquement la largeur.

Référence des points de rupture CSS

Points de rupture CSS courants utilisés par les frameworks populaires. Votre largeur de viewport actuelle est mise en surbrillance.

Nom Plage du point de rupture Usage courant

Référence des résolutions d'écran courantes

Nom / Appareil Résolution Rapport DPR Appareils courants Catégorie

User Agent du navigateur

Chargement…

Que signifient ces informations ?

Résolution d'écran

La résolution d'écran est le nombre total de pixels que votre moniteur peut afficher, exprimé en largeur × hauteur (ex. 1920×1080). C'est une propriété matérielle — elle ne change que si vous modifiez les paramètres d'affichage. Résolution plus élevée = plus de pixels = image plus nette et plus de contenu visible à l'écran.

Ratio de pixels (DPR)

Le DPR est le rapport entre les pixels physiques et les pixels CSS (logiques). Un DPR de 2 signifie que chaque pixel CSS est rendu avec 2×2 = 4 pixels physiques, rendant tout plus net sur les écrans « Retina » ou « HiDPI ». La plupart des smartphones modernes ont un DPR ≥ 2 ; de nombreux MacBook ont un DPR = 2 ; certains téléphones Android ont un DPR de 3 ou plus.

Pour les développeurs web : utilisez @media (-webkit-min-device-pixel-ratio: 2) ou window.devicePixelRatio en JavaScript pour servir des images à plus haute résolution aux écrans HiDPI.

Viewport vs résolution d'écran

Votre résolution d'écran est fixe (ex. 1920×1080). Votre viewport est la zone de contenu de la fenêtre du navigateur — il rétrécit quand vous redimensionnez le navigateur, ouvrez les outils de développement, des barres latérales, ou zoomez. Les media queries CSS répondent à la taille du viewport, pas à la résolution d'écran. La taille du viewport affichée ici se met à jour en direct lors du redimensionnement.

Profondeur de couleur

La profondeur de couleur (en bits) détermine combien de couleurs distinctes chaque pixel peut afficher. 24 bits = 16,7 millions de couleurs (« couleurs vraies » standard). 30 bits = 1,07 milliard de couleurs (« couleurs profondes », présentes sur les écrans professionnels). La plupart des moniteurs modernes sont en 24 ou 30 bits.

Comment vérifier la résolution d'écran dans les paramètres système

  • Windows 11 : Clic droit sur le bureau → Paramètres d'affichage → « Résolution d'affichage »
  • macOS : Menu Pomme → Réglages Système → Moniteurs
  • Ubuntu/Linux : Paramètres → Moniteurs
  • Ou regardez simplement en haut de cette page — sans passer par les paramètres.

Questions fréquentes

Votre résolution d'écran est affichée dans la carte « Résolution d'écran » en haut de cette page. Elle a été détectée automatiquement par votre navigateur via l'API window.screen. Si vous disposez d'un écran Retina/HiDPI, la ligne « Pixels physiques » indique le nombre réel de pixels matériels (résolution × DPR).
Le DPR représente le nombre de pixels physiques pour chaque pixel CSS logique. DPR 1 = écran standard. DPR 2 = Retina (votre écran a 4× plus de pixels qu'un écran 1× à la même taille CSS). DPR 3 = présent sur de nombreux téléphones Android. Un DPR plus élevé signifie un texte et des images plus nets, mais les images doivent être fournies en plus haute résolution pour en bénéficier.
La résolution d'écran est le nombre total de pixels du moniteur (fixe). La taille du viewport est la zone de la fenêtre du navigateur affichant le contenu web — elle change quand vous redimensionnez le navigateur, zoomez, ouvrez/fermez les outils de développement ou la barre d'adresse. Les media queries CSS répondent à la taille du viewport, pas à la résolution d'écran. Le viewport affiché ici se met à jour en direct.
Clic droit sur le bureau → Paramètres d'affichage → faites défiler jusqu'à « Résolution d'affichage ». Ou appuyez sur Win+I pour ouvrir Paramètres, puis allez dans Système → Affichage. Vous pouvez aussi consulter le haut de cette page — votre résolution s'affiche instantanément sans navigation.
Menu Pomme (en haut à gauche) → Réglages Système → Moniteurs. Sous le nom de votre moniteur, vous verrez la résolution. Sur un macOS plus ancien : Préférences Système → Moniteurs. Note : sur les Mac Retina, macOS peut afficher une résolution « mise à l'échelle » (ex. « Semble être 2560×1600 ») — c'est la résolution logique. La résolution physique matérielle est 2× supérieure.