Pixels physiques vs logiques : guide interactif avec les vraies valeurs de votre ecran
Votre ecran — detection en direct :
Vous reglez votre moniteur sur 3840×2160, mais screen.width en JavaScript affiche 2560 (et screen.height affiche 1440). Vous faites une capture d'ecran — 3840 pixels de large. Vous ecrivez width: 100px en CSS et ca s'affiche en 200 pixels physiques. Que se passe-t-il ?
Votre ecran fait en realite tourner deux systemes de resolution — les pixels physiques (les vrais points materiels) et les pixels logiques (ce que le logiciel utilise pour la mise en page). Le ratio entre les deux est le Device Pixel Ratio (DPR), et il affecte absolument chaque coordonnee de votre ecran. Vos vraies valeurs s'affichent ci-dessus.
Ouvrir l'outil gratuit de coordonnees d'ecranLes valeurs de votre ecran — en direct
Avant de plonger dans la theorie, voici les valeurs actuelles de votre ecran :
Ces valeurs proviennent des API reelles de votre navigateur — pas d'estimation. La resolution physique « estimee » est calculee comme screen.width × DPR et screen.height × DPR ; elle correspond au materiel reel dans la plupart des cas, mais peut etre affectee par la super-resolution virtuelle du GPU ou le zoom du navigateur. Si le DPR est de 1,0, vos pixels physiques et logiques sont identiques. S'il est superieur, il y a une transformation entre ce que le logiciel voit et ce que votre ecran affiche. Utilisez notre outil de coordonnees d'ecran pour voir l'impact en temps reel sur les positions de la souris.
Que sont les pixels physiques ?
Un pixel physique (aussi appele pixel materiel ou device pixel) est un seul point reel sur le materiel de votre ecran. C'est le plus petit element adressable de votre affichage. Sur un ecran LCD, chaque pixel physique est compose de trois sous-pixels (rouge, vert, bleu) qui ensemble produisent un point colore.
La resolution physique de votre moniteur vous dit exactement combien de ces points il possede :
- Un moniteur 1920×1080 possede 2 073 600 pixels physiques
- Un moniteur 3840×2160 (4K) possede 8 294 400 pixels physiques
- Un iPhone 15 Pro possede 2556×1179 pixels physiques dans un ecran de 6,1 pouces
Les pixels physiques ne changent jamais pour un ecran donne. Un moniteur 4K a toujours 3840×2160 pixels physiques quel que soit le reglage de mise a l'echelle Windows. Le materiel est fixe.
Pour un comparatif de ce que differents nombres de pixels physiques signifient pour les systemes de coordonnees, consultez notre guide Comparatif de resolutions d'ecran.
Que sont les pixels logiques (pixels CSS) ?
Un pixel logique (aussi appele pixel CSS, pixel independant du peripherique (DIP), ou point sur macOS) est une unite de mesure que le logiciel utilise pour la mise en page. C'est une abstraction — un pixel logique n'est pas forcement un pixel physique.
Sur un moniteur 1080p standard a 100 % de mise a l'echelle, un pixel logique = un pixel physique. Simple. Mais sur un MacBook Pro Retina avec un DPR de 2, un pixel logique = une grille de 2×2 pixels physiques (4 pixels physiques au total). Sur un ecran 4K Windows a 150 % de mise a l'echelle, un pixel logique = une zone de 1,5×1,5 pixels physiques.
Pourquoi les pixels logiques existent : Sans eux, un bouton defini a 100×30 pixels serait minuscule sur un ecran 4K de telephone (ou les pixels sont microscopiques) mais enorme sur un projecteur 720p. Les pixels logiques permettent aux developpeurs d'ecrire width: 100px et d'obtenir une taille physique similaire sur tous les appareils, quelle que soit la densite de pixels.
Comparaison visuelle — chaque carre colore represente un pixel physique. Un pixel logique correspond a differentes grilles selon le DPR :
DPR 1 (1 px CSS = 1×1)
DPR 1,5 (1 px CSS = 1,5×1,5)
DPR 2 (1 px CSS = 2×2)
DPR 3 (1 px CSS = 3×3)
Device Pixel Ratio : le pont entre physique et logique
Le Device Pixel Ratio (DPR) est le multiplicateur qui convertit les pixels logiques en pixels physiques :
pixels_physiques = pixels_logiques × DPR
Exemples (largeur uniquement) :
1920 logiques × DPR 1,0 = 1920 physiques (1080p standard)
2560 logiques × DPR 1,5 = 3840 physiques (4K a 150 %)
1440 logiques × DPR 2,0 = 2880 physiques (MacBook Retina)En JavaScript, vous pouvez lire votre DPR avec window.devicePixelRatio. Cette valeur est en lecture seule — elle est determinee par votre materiel d'affichage et les reglages de mise a l'echelle du systeme.
Le DPR n'est pas toujours un nombre entier
Windows utilise couramment des valeurs fractionnaires de DPR : 1,25 (125 %), 1,5 (150 %), 1,75 (175 %). macOS utilise exactement 2,0 pour les ecrans Retina. Les appareils Android utilisent diverses valeurs (1,5, 2,0, 2,625, 3,0, 3,5, 4,0). Un DPR fractionnel signifie que les pixels logiques ne correspondent pas proprement aux pixels physiques — un pixel logique peut couvrir une partie de plusieurs pixels physiques, d'ou le rendu de texte legerement flou sous Windows a 125 % de mise a l'echelle.
Pour comprendre comment le DPR interagit avec la mise a l'echelle DPI sous Windows et casse les scripts d'automatisation, consultez notre guide Mise a l'echelle DPI et coordonnees.
DPR par appareil : MacBook, Windows, Android, iPhone
Valeurs de DPR pour les appareils courants :
| Appareil | Resolution physique | Resolution logique | DPR | 1 pixel CSS = |
|---|---|---|---|---|
| Moniteur PC standard (1080p) | 1920×1080 | 1920×1080 | 1,0 | 1 pixel physique |
| Windows 4K a 150 % | 3840×2160 | 2560×1440 | 1,5 | 2,25 pixels physiques |
| Windows 4K a 200 % | 3840×2160 | 1920×1080 | 2,0 | 4 pixels physiques |
| MacBook Pro 14" | 3024×1964 | 1512×982 | 2,0 | 4 pixels physiques |
| MacBook Pro 16" | 3456×2234 | 1728×1117 | 2,0 | 4 pixels physiques |
| iPad Pro 11" | 2388×1668 | 1194×834 | 2,0 | 4 pixels physiques |
| iPhone 15 Pro | 2556×1179 | 393×852 | 3,0 | 9 pixels physiques |
| Pixel 8 | 2400×1080 | 412×915 | ~2,625 | ~6,9 pixels physiques |
| Samsung Galaxy S24 | 2340×1080 | 360×780 | ~3,0 | 9 pixels physiques |
Remarquez la logique : Apple s'en tient aux DPR entiers (2 ou 3). Windows utilise des valeurs fractionnaires (1,25, 1,5, 1,75) pour un controle plus fin de la mise a l'echelle. Les applications et navigateurs modernes gerent le DPR fractionnel proprement avec le rendu sous-pixel — seules les applications anciennes non sensibles au DPI sont etirees en bitmap et paraissent floues. Android varie selon le fabricant.
Ce que cela signifie pour les coordonnees d'ecran et l'automatisation
Alors, qu'est-ce que ca veut dire en pratique ?
- Les outils d'automatisation ne sont pas d'accord sur les coordonnees. PyAutoGUI sans sensibilisation DPI utilise des coordonnees logiques ; l'API Windows
GetCursorPosrenvoie des coordonnees physiques (pour les processus sensibles au DPI). Les melanger et chaque position est decalée du facteur DPR. Notre guide Coordonnees PyAutoGUI a la solution. - Les captures d'ecran enregistrent en pixels physiques. Sur un ecran 4K a 150 % de mise a l'echelle, une capture fait 3840×2160 — pas 2560×1440. Vous cherchez un element UI par ses coordonnees logiques dans cette capture ? Multipliez par le DPR d'abord.
- Les coordonnees CSS sont toujours logiques. Reglez
left: 100px; top: 200pxet ce sont des pixels logiques — le navigateur les convertit en pixels physiques en arriere-plan. C'est pourquoigetBoundingClientRect()renvoie des pixels CSS. - Les configurations multi-ecrans peuvent avoir des DPR mixtes. Un ecran de portable Retina (DPR 2) a cote d'un moniteur externe standard (DPR 1) signifie que la meme coordonnee correspond a des emplacements physiques differents sur chaque ecran. Notre guide Coordonnees multi-ecrans couvre ce sujet.
Reference rapide : quel systeme de coordonnees utilise-je ?
| Outil / API | Type de coordonnees | Resolution signalee |
|---|---|---|
| PyAutoGUI (par defaut) | Logique | Logique (par ex. 2560×1440) |
| PyAutoGUI (avec SetProcessDPIAware) | Physique | Physique (par ex. 3840×2160) |
| AutoHotkey A_ScreenWidth | Logique | Logique |
| Windows GetCursorPos (sensible au DPI) | Physique | Physique |
| JavaScript screen.width/height | Logique (CSS) | Logique |
| JavaScript window.innerWidth | Logique (CSS) | Logique |
| CSS getBoundingClientRect() | Logique (CSS) | N/A |
| macOS NSScreen (Quartz) | Points (logique) | Points |
Questions frequentes
Le DPR est-il la meme chose que le DPI ?
Liés mais differents. Le DPI (dots per inch) mesure la densite physique de pixels — combien de pixels tiennent dans un pouce d'ecran. Le DPR (device pixel ratio) est le rapport entre pixels physiques et logiques. Un ecran a haute densite peut avoir un DPR de 1 si le systeme ne le met pas a l'echelle. Le DPR concerne le mappage logiciel ; le DPI concerne la densite materielle.
Pourquoi mon Mac Retina est-il plus net que mon PC Windows 4K ?
macOS utilise un DPR entier (2,0), ce qui signifie que chaque pixel CSS correspond exactement a une grille 2×2 de pixels physiques — un mappage propre de 4:1. Windows utilise couramment un DPR fractionnel (1,25, 1,5, 1,75), ce qui signifie qu'un pixel CSS correspond a un nombre non entier de pixels physiques. Cela provoque des artefacts de rendu sous-pixel et une leger flou dans les applications non sensibles au DPI.
Puis-je changer mon DPR ?
Vous le modifiez indirectement via les parametres de mise a l'echelle du systeme. Sous Windows : Parametres → Systeme → Affichage → Mise a l'echelle et disposition. Sur macOS : Reglages Systeme → Moniteurs → choisissez « Par defaut » pour le DPR natif ou « Mise a l'echelle » pour une resolution logique differente. Sur Android : Parametres → Affichage → Taille d'affichage / Taille de police (controle limite). Le DPR change instantanement, mais certaines applications doivent etre redemarrees pour prendre en compte le changement.
Pourquoi window.devicePixelRatio change-t-il entre les moniteurs ?
Si vous faites glisser votre navigateur d'un moniteur externe a DPR 1,0 vers un ecran de portable Retina a DPR 2,0, window.devicePixelRatio se met a jour pour refleter le DPR du nouveau moniteur. Vous pouvez ecouter ce changement avec l'evenement matchMedia('(resolution: ' + dpr + 'dppx)') change. C'est pertinent pour les applications web qui doivent gerer des configurations DPI mixtes.