Aller au contenu
SPCXTools

Résolution d'écran

Affichez instantanément la résolution de votre écran, la taille du viewport du navigateur, le ratio de pixels et d'autres détails d'affichage.

Fonctionne en local — vos fichiers ne quittent pas votre appareil

Chargement de l’outil…

Comment utiliser : Résolution d'écran

  1. 1Ouvrez la page — votre résolution d'écran s'affiche immédiatement en haut.
  2. 2Consultez les détails ci-dessous — résolution CSS, ratio de pixels de l'appareil, taille du viewport, format d'image, profondeur de couleur et plus encore.
  3. 3Redimensionnez la fenêtre du navigateur ou faites pivoter votre appareil ; les valeurs se mettent à jour en direct.
  4. 4Cliquez sur Copier pour partager tous les détails, par exemple dans un rapport de bug.

Quelle est ma résolution d'écran ?

La résolution de votre écran est le nombre de pixels que votre affichage montre horizontalement et verticalement, comme 1920 × 1080. Cet outil la détecte instantanément, ainsi que les détails dont les concepteurs web, les développeurs et les équipes de support ont généralement besoin : la résolution CSS, le ratio de pixels de l'appareil, la taille du viewport du navigateur, l'espace d'écran disponible, le format d'image, la profondeur de couleur, la gamme de couleurs et le support HDR. Tout est lu localement depuis votre navigateur.

Comprendre les chiffres

La résolution physique est le nombre réel de pixels sur la dalle (pour la plupart des configurations). C'est ce que les fabricants annoncent, par ex. 2560 × 1440.

Les pixels CSS sont les unités logiques que les sites web utilisent. Lorsque votre système met l'affichage à l'échelle — par exemple 200 % sur un écran Retina — un pixel CSS couvre plusieurs pixels physiques, de sorte que le texte reste d'une taille lisible tout en étant plus net.

Le ratio de pixels de l'appareil relie les deux : pixels physiques = pixels CSS × DPR.

Le viewport est la zone de page visible à l'intérieur du navigateur. Il change chaque fois que vous redimensionnez la fenêtre, ouvrez les outils de développement ou affichez la barre de favoris.

Résolutions d'écran courantes

Nom Résolution Format d'image
HD (720p) 1280 × 720 16:9
Full HD (1080p) 1920 × 1080 16:9
WUXGA 1920 × 1200 16:10
QHD (1440p) 2560 × 1440 16:9
UWQHD (ultrawide) 3440 × 1440 21:9
4K UHD 3840 × 2160 16:9
5K 5120 × 2880 16:9

À qui s'adresse cette information

Les concepteurs et développeurs web testent les mises en page responsives par rapport aux tailles de viewport et aux ratios de pixels réels, et en ont besoin pour reproduire les rapports de bug des visiteurs.

Les équipes de support et d'informatique demandent les détails de l'écran lors du dépannage de problèmes d'affichage ou de mise en page — utilisez le bouton Copier pour tout envoyer en une seule fois.

Les joueurs et créateurs confirment qu'un nouveau moniteur fonctionne à sa résolution native plutôt qu'en mode mis à l'échelle ou inférieur.

Toute personne achetant des fonds d'écran, des captures d'écran ou des présentations peut faire correspondre les images à la taille exacte de son écran pour un résultat des plus nets.

Vérifiez la vitesse de rafraîchissement de votre écran avec le Test de Taux de Rafraîchissement, ou recherchez des pixels défectueux avec le Test de Pixels Morts.

Questions fréquentes

Pourquoi la résolution est-elle différente des spécifications de mon moniteur ?
Les systèmes d'exploitation mettent souvent l'interface à l'échelle. Un moniteur 3840 × 2160 (4K) avec une mise à l'échelle de 150 % signale une résolution "CSS" de 2560 × 1440 aux sites web, avec un ratio de pixels de l'appareil de 1.5. La Résolution d'écran en haut de la page les remultiplie pour obtenir les pixels physiques. Le zoom du navigateur modifie également le ratio de pixels, donc réinitialisez le zoom à 100 % (Ctrl/Cmd + 0) pour des résultats précis.
Qu'est-ce que le ratio de pixels de l'appareil (DPR) ?
Le DPR est le nombre de pixels physiques par pixel CSS. Un moniteur standard a un DPR de 1 ; les Mac Retina et la plupart des téléphones en ont 2 ou 3. Les écrans à DPR élevé affichent du texte et des images plus nets car chaque pixel CSS est dessiné avec plusieurs pixels physiques.
Qu'est-ce que le viewport et pourquoi est-ce important ?
Le viewport est la zone à l'intérieur de la fenêtre du navigateur où les pages web sont affichées, à l'exclusion des barres d'outils et des onglets. Les concepteurs web l'utilisent — et non la taille plein écran — pour les mises en page responsives, c'est donc le chiffre le plus utile pour décrire l'apparence d'un site web sur votre appareil.
Que signifie la taille d'écran "disponible" ?
C'est la surface de l'écran moins les éléments permanents du système d'exploitation tels que la barre des tâches de Windows ou la barre de menus et le Dock de macOS — la plus grande taille qu'une fenêtre peut atteindre sans les chevaucher.
Le HDR et la gamme de couleurs signalés sont-ils précis ?
Cela reflète ce que le navigateur signale via les media queries CSS. Le HDR est indiqué comme pris en charge lorsque l'écran et le système d'exploitation sont en mode HDR ; une large gamme de couleurs (wide gamut, Display P3) est courante sur les appareils Apple et les téléphones et moniteurs récents.