Test de résolution d'écran

À propos de l'outil

Connaître la taille exacte de la fenêtre d'affichage, le rapport de pixels de l'appareil et la résolution de l'écran de l'appareil sur lequel vous testez est essentiel pour la conception réactive et la reproduction des bogues. Cet outil les signale en temps réel et les met à jour au fur et à mesure que vous faites pivoter ou redimensionnez. Utilisez-le pour confirmer qu'un écran Retina double les pixels, pour capturer la fenêtre d'affichage exacte pour une capture d'écran, ou pour déboguer des points d'arrêt qui se comportent différemment de ce qui est attendu.

Questions fréquentes

Résolution vs fenêtre d'affichage — quelle est la différence ?

La résolution est le nombre de pixels physiques de l'écran. La fenêtre d'affichage est l'espace en pixels CSS dans lequel votre page est rendue, qui est généralement plus petit en raison de la mise à l'échelle DPR.

Qu'est-ce que le rapport de pixels de l'appareil ?

Le rapport entre les pixels physiques et les pixels CSS. Un DPR de 2 signifie que chaque pixel CSS est rendu comme un bloc 2x2 — c'est pourquoi les images Retina doivent être 2x.

Pourquoi la largeur change-t-elle lorsque je fais pivoter ?

Le paysage et le portrait échangent les dimensions et peuvent déclencher différentes requêtes média. Testez toujours les deux orientations sur mobile.

Quels points d'arrêt dois-je prendre en charge ?

La conception réactive moderne cible 360, 768, 1024 et 1440 px comme points d'ancrage ; concevez de manière fluide entre eux plutôt que pour des appareils spécifiques.