Outil d'info écran gratuit en ligne. Vérifiez résolution, DPI, ratio et profondeur de couleur de votre moniteur. Dans le navigateur.
Appuyez sur Ctrl+D pour ajouter cette page aux favoris
L'outil d'information écran affiche la résolution, la taille du viewport, le DPR et la profondeur de couleur de votre appareil.
Le DPR est le nombre de pixels physiques par pixel CSS. Un DPR de 2 indique un écran Retina, les images doivent être 2x plus grandes pour un affichage net.
La résolution est le nombre total de pixels physiques de l'écran, tandis que le viewport est la zone d'affichage du contenu dans le navigateur, hors barres d'outils.
Caler les points de rupture sur des noms d'appareils précis garantit qu'ils cassent dès qu'un nouveau modèle sort. Coupez plutôt là où la mise en page elle-même commence à mal tourner. En pratique, 480, 768, 1024 et 1280 px servent souvent de points de départ, mais ce sont des chiffres faciles à retenir, pas des règles. Rétrécissez lentement la fenêtre du navigateur et guettez la largeur à laquelle les lignes de texte s'allongent trop ou une carte s'écrase : placer là le point de rupture tient bien mieux dans le temps.
Parce qu'un pixel CSS est une unité de taille apparente, pas un point physique. Sur un écran 4K réglé à 200 % de mise à l'échelle, 3840 points physiques sont présentés comme 1920 pixels CSS, ce qui rend justement le texte et les icônes plus denses et plus nets. Le rapport de pixels de l'appareil vaut alors 2 : pour garder des images nettes, il faut fournir via srcset un fichier au double de la taille affichée.