Vérificateur de rapport de pixels de l'appareil
Your appareil pixel ratio
—
Zoom in or out (Ctrl/Cmd +/−) to watch the ratio change. All values are read localement.
Mode d'emploi
- Ouvrez la page: le rapport de pixels de votre appareil apparaît sous la forme d'un grand nombre en haut.
- Lisez la fiche détaillée de la résolution pour comparer les pixels CSS avec les pixels physiques et voir votre profondeur de couleur.
- Effectuez un zoom avant ou arrière avec Ctrl/Cmd et +/− pour observer le changement du DPR en temps réel.
FAQ
Quel est le ratio de pixels de mon appareil?
Le grand chiffre en haut est le rapport de pixels de votre appareil (DPR) – la valeur de window.devicePixelRatio. Un DPR de 1 signifie un pixel physique par pixel CSS; un DPR de 2 (Retina) signifie quatre pixels physiques par pixel CSS.
Qu'est-ce qu'un bon rapport de pixels pour un appareil?
Il n’existe pas de meilleur rapport qualité-prix: cela dépend du matériel. Les moniteurs standard sont généralement de 1, les ordinateurs portables Retina et la plupart des téléphones sont de 2 ou 3. Un DPR plus élevé signifie des textes et des images plus nets mais des ressources de plus grande taille.
Pourquoi mon DPR change-t-il lorsque je zoome?
Le zoom du navigateur multiplie le rapport de pixels de l'appareil, donc un zoom à 150 % sur un affichage 1x rapporte un DPR de 1,5. C'est pourquoi le DPR est lu en direct ici et mis à jour lorsque vous zoomez ou déplacez la fenêtre entre les moniteurs.
Comment le DPR affecte-t-il les images?
Sur un écran 2x, une image de 100 × 100 pixels CSS a besoin d'une source de 200 × 200 pour être nette. Utilisez DPR avec srcset et le descripteur x (1x, 2x, 3x) pour que les écrans haute densité obtiennent des ressources nettes sans forcer les écrans basse densité à les télécharger.
Quelle est la différence entre CSS et résolution physique?
La résolution CSS est la taille logique utilisée pour la mise en page (screen.width × screen.height). La résolution physique multiplie cela par le DPR pour donner la grille de pixels réelle restituée par le panneau. Les deux sont affichés dans la carte détaillée.
Des données sont-elles envoyées à un serveur?
Non. Le rapport et la résolution sont lus avec les API de navigateur standard et calculés localement. Rien n'est téléchargé.
Introduction
Device Pixel Ratio Checker répond à une question que chaque développeur front-end finit par poser: quel est mon DPR? Il litwindow.devicePixelRatioen direct et l'affiche sous la forme d'un nombre unique et bien visible, puis décompose la façon dont votre résolution CSS correspond aux pixels physiques du panneau.
Le rapport de pixels de l'appareil est le pont entre le système de coordonnées utilisé par votre CSS et la grille de pixels dense des écrans modernes. Bien faire les choses est ce qui rend le texte net sur un MacBook Retina et les images nettes sur un téléphone phare – et se tromper est la raison pour laquelle les actifs semblent flous ou surdimensionnés.
Quel est le ratio de pixels de l'appareil?
Le ratio de pixels de l'appareil (DPR) est le nombre de pixels physiques de l'appareil qui correspondent à un seul pixel CSS. Il est exposé en JavaScript sous la formewindow.devicePixelRatio.
| DPR | Signification | Matériel typique |
|---|---|---|
1 |
1 px physique = 1 px CSS | Moniteurs de bureau standards |
2 |
4 px physiques par px CSS | Ordinateurs portables Retina, de nombreuses tablettes |
3 |
9 px physiques par px CSS | Smartphones haut de gamme |
| Fractional | Mise à l'échelle du système d'exploitation ou zoom du navigateur | Mise à l'échelle Windows 125 %/150 %, zoom |
Comment le DPR est calculé ici
L'outil litwindow.devicePixelRatiopour le ratio etscreen.width/screen.heightpour la résolution CSS, puis les multiplie pour estimer la résolution physique. Étant donné que la valeur change avec le zoom et lorsqu'une fenêtre se déplace entre des moniteurs de densités différentes, la lecture se met automatiquement à jour lors du redimensionnement.
Cas d'utilisation courants
- Travail d'image réactif — décidez quelles densités
srcset(1x, 2x, 3x) vous devez expédier. - Canvas et WebGL: redimensionnez le tampon de dessin par DPR afin que le rendu ne soit pas flou sur les écrans HiDPI.
- Rapports d'assurance qualité et de bogues — enregistrez le DPR lorsqu'un rapport « flou sur mon écran » arrive.
- Transfert de conception: confirmez la densité cible avant d'exporter les ressources.
Meilleures pratiques
- Multipliez les dimensions du canevas par DPR (et redimensionnez le contexte) pour obtenir des graphiques nets sur des écrans haute densité.
- Fournissez des sources d'images
2xet, pour les téléphones,3x, mais évitez de les diffuser sur des écrans1xpour économiser de la bande passante. - Traitez DPR comme dynamique: ne le mettez jamais en cache une fois au chargement; relisez-le lors du redimensionnement, comme le fait cet outil.
- Pour les dimensions brutes de la fenêtre, associez-le au viewport size checker; pour un instantané complet de l'environnement, voir device info.