Quel est le ratio de pixels de mon 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 en grand en haut.
- Utilisez Ctrl/Cmd + ou − pour zoomer et observer les changements de DPR sur certains systèmes.
- Cliquez sur Copier pour enregistrer la valeur DPR pour les paramètres d'exportation CSS ou d'image.
FAQ
Quel est le ratio de pixels de mon appareil?
Le rapport de pixels de l'appareil (DPR) est window.devicePixelRatio - combien de pixels physiques de l'écran correspondent à un pixel CSS. Un DPR de 2 signifie qu'un pixel CSS est dessiné avec 2 × 2 pixels physiques (typiquement Retina/HiDPI).
Qu'est-ce qu'un rapport de pixels normal sur un appareil?
1 est la densité de bureau standard. 2 est courant sur les Mac Retina et sur de nombreux téléphones. 3 apparaît sur certains téléphones phares. Les valeurs fractionnaires (par exemple 1,25) proviennent souvent de la mise à l'échelle de l'affichage du système d'exploitation ou du zoom du navigateur.
Pourquoi le DPR change-t-il lorsque je zoome?
Le zoom du navigateur peut affecter le DPR signalé sur certaines plates-formes, car la relation entre les pixels CSS et les pixels de l'appareil change. Actualisez après avoir réinitialisé le zoom à 100 % pour une lecture de référence.
Comment calculer la résolution physique?
Multipliez la largeur et la hauteur de l'écran CSS par DPR. Cette page affiche automatiquement la résolution CSS et la résolution physique dans le panneau de détails.
Quelle est la différence entre le DPR et la résolution d’écran?
La résolution de l'écran est la largeur × la hauteur en pixels CSS. DPR est le multiplicateur des pixels physiques. Vous avez besoin des deux pour choisir les tailles d'éléments d'image correctes (@2x, @3x).
Des données sont-elles envoyées à un serveur?
Non. Les valeurs DPR et d'écran sont lues localement à partir des API de fenêtre. Rien n'est téléchargé.
Introduction
Quel est le ratio de pixels de mon appareil affiche votredevicePixelRatioactuel à l'avant et au centre - le nombre qui vous indique si vous utilisez un rendu standard (1×), Retina (2×) ou de densité supérieure (3×), avec CSS et résolution physique précisés ci-dessous.
DPR explique pourquoi un écran « 1 920 × 1 080 » semble net ou doux, pourquoi les images@2xsont importantes et pourquoi les tampons Canvas et WebGL nécessitent des tailles différentes de celles des pixels CSS. Cette page lit la valeur en direct de votre navigateur sans installation.
Comprendre le ratio de pixels de l'appareil
Rapport de pixels de l'appareil (DPR) = pixels physiques par pixel CSS.
| DPR | Label | Appareils typiques |
|---|---|---|
| 1 | Standard | De nombreux moniteurs externes, ordinateurs portables plus anciens |
| 2 | Rétine / HiDPI | MacBook Retina, de nombreux téléphones |
| 3 | High-density | Quelques téléphones phares |
| 1,25-1,5 | Mise à l'échelle du système d'exploitation | Échelle d'affichage Windows, zoom fractionnaire |
Largeur physique ≈screen.width × DPR(affichée dans le panneau de détails).
Cas d'utilisation courants
- Choix des éléments d'image: exportez les icônes @2x/@3x lorsque DPR est 2 ou 3.
- Canvas et WebGL: définissez les dimensions du magasin de sauvegarde à l'aide de DPR pour un rendu net.
- CSS
image-set()etresolution— vérifiez quelles règles de densité s'appliquent. - Contrôle qualité sur toutes les machines: documentez le DPR lorsqu'une mise en page semble différente sur Retina et non-Retina.
Meilleures pratiques
- Réinitialisez le zoom du navigateur à 100 % avant d'enregistrer un DPR de référence à des fins de documentation.
- Associez DPR avec what is my screen resolution pour des métriques d'affichage complètes.
- Utilisez what is my viewport size pour la largeur de la mise en page — DPR ne remplace pas la fenêtre d'affichage pour les points d'arrêt.
- Pour l'instantané tout-en-un, ouvrez device info.