Les valeurs ci-dessus proviennent directement des API Screen et window du navigateur : largeur et hauteur logiques, hauteur disponible moins les barres de tâches si signalées, profondeur de couleur, profondeur de pixels, orientation et devicePixelRatio. J'ai un jour signalé un bug sur un écran ultra-large 3440×1440 où les captures d'écran promotionnelles utilisaient la résolution matérielle complète de la dalle alors que le composant d'accueil lisait window.innerWidthaprès que le panneau des outils de développement avait consommé 400 pixels, faisant croire à l'équipe d'assurance qualité (QA) que le site "ne gérait pas" les écrans ultra-larges. Ci-dessous, je distingue les pixels physiques des pixels CSS, j'explique la mise à l'échelle (scaling) et le zoom, et je montre comment lire ces mêmes valeurs depuis le système d'exploitation lorsque le navigateur masque la réalité pour des raisons de confidentialité.
Pixels physiques, pixels CSS et devicePixelRatio
Les pixels physiques (pixels matériels) sont les points physiques de votre dalle. Les pixels CSS représentent le système de coordonnées utilisé pour la mise en page. Un pixel CSS peut correspondre à un, deux ou trois pixels physiques selon window.devicePixelRatio(DPR). Les smartphones haute densité (HiDPI) sont souvent configurés avec un DPR de 2 ou 3 afin que le texte reste lisible sans réduire la grille de mise en page. Une "largeur CSS" de 390 sur un iPhone ne signifie pas que l'écran fait 390 pixels matériels de large.
Le Viewport est la zone d'affichage visible dans la fenêtre du navigateur. Il change lorsque vous zoomez, divisez l'écran ou ouvrez le clavier sur mobile. screen.width est proche de la définition déclarée par l'écran ; window.innerWidth suit le viewport de mise en page dans lequel la page est réellement dessinée.
Comment cette page détecte les propriétés de l'écran
Le code côté client lit screen.width, screen.height, screen.availWidth, screen.availHeight, screen.colorDepth, window.devicePixelRatio et screen.orientation.type lorsque ces valeurs sont exposées. Certaines valeurs sont arrondies ou bridées sur les navigateurs axés sur la protection de la vie privée. Les bureaux virtuels ou les connexions à distance peuvent renvoyer la résolution de la session invitée, et non celle du moniteur physique réel.
Pourquoi les valeurs du navigateur diffèrent de celles de la boîte du moniteur
La mise à l'échelle du système d'exploitation à 125 %, 150 % ou 200 % projette les unités logiques du bureau sur un nombre réduit de pixels physiques pour améliorer la lisibilité. Le zoom du navigateur (Ctrl/Cmd + plus) réduit le viewport CSS sans modifier le matériel du moniteur. Les définitions non natives (comme afficher du 1080p sur une dalle 4K) signalent le mode actif, et non le maximum matériel de la dalle. Les stations d'accueil externes transmettent parfois un EDID incorrect jusqu'à ce que leur firmware soit mis à jour.
Définitions d'écran courantes en 2026
| Nom | Définition typique | Format d'aspect | Utilisation typique |
|---|---|---|---|
| 1080p (FHD) | 1920 × 1080 | 16:9 | PC portables d'entrée de gamme, seconds écrans |
| 1440p (QHD) | 2560 × 1440 | 16:9 | Standard de productivité sur de nombreux bureaux |
| 4K UHD | 3840 × 2160 | 16:9 | Création de contenu, texte net à l'échelle native |
| 5K (classe iMac) | 5120 × 2880 | 16:9 | Retouche photo et montage vidéo professionnel |
| 8K UHD | 7680 × 4320 | 16:9 | Étalonnage haut de gamme, affichage dynamique |
| Ultra-large 21:9 (1440p de haut) | 3440 × 1440 | 21:9 | Montage vidéo, salles de marché |
Vérification depuis les paramètres système et le terminal
Si le navigateur affiche des données suspectes, vérifiez ce que le système d'exploitation détecte pour cette dalle.
- Windows :Paramètres → Système → Écran → Résolution de l'écran.
- macOS : Réglages Système → Moniteurs → Résolution.
# Linux (X11 / nombreuses sessions Wayland)
xrandr --query
# Hyprland
hyprctl monitorsRetina, HDR et pourquoi l'accessibilité l'emporte sur la définition brute
Apple a popularisé le terme Retina comme argument marketing pour désigner un "DPR suffisamment élevé pour que les pixels individuels soient invisibles à une distance d'utilisation normale." Il ne s'agit pas d'un attribut d'API spécifique, mais d'un DPR élevé combiné à une typographie optimisée. Les utilisateurs agrandissent le texte via le zoom ou l'échelle système ; les points de rupture (breakpoints) doivent utiliser min-width en pixels CSS et respecter prefers-reduced-motion plutôt que de supposer un affichage fixe de 1920 pixels.
Questions fréquemment posées
Quelle est la différence entre la taille de l'écran et la définition ?
La taille correspond à la diagonale physique du moniteur en pouces. La définition est le nombre de pixels de la dalle (par exemple, 2560×1440). Deux moniteurs de 27 pouces peuvent afficher des définitions différentes et utiliser des DPR différents selon les réglages système.
Que signifie le device pixel ratio ?
C'est le rapport entre les pixels physiques et les pixels CSS. Un DPR de 2 signifie qu'un pixel CSS occupe une zone de 2×2 pixels physiques. Les images matricielles (raster) nécessitent des résolutions intrinsèques plus élevées pour rester nettes sur les écrans à DPR élevé.
Pourquoi mon navigateur affiche-t-il une définition plus basse que celle de mon écran ?
Vous lisez probablement innerWidth / innerHeight (viewport) ou utilisez une mise à l'échelle du système. La largeur complète du bureau s'obtient en multipliant screen.width par le rapport entre pixels CSS et physiques, valeur qui reste soumise au zoom.
Qu'est-ce qu'un écran Retina ?
Un terme marketing pour désigner des dalles haute densité où le texte et l'interface sont rendus si finement que les pixels ne sont pas visibles à une distance d'affichage normale. Techniquement, il s'agit toujours d'un écran LCD ou OLED avec un DPR supérieur.
Comment modifier la définition de mon écran ?
Utilisez les paramètres système mentionnés plus haut. Choisissez la définition native de l'écran pour obtenir la meilleure netteté. Les jeux vidéo peuvent redéfinir la résolution indépendamment du bureau.
Outils connexes
Informations GPU et WebGL : Quel est mon WebGL / GPU. Nom et moteur du navigateur : Quel est mon navigateur. Chaîne User Agent brute : Quel est mon User Agent.
Sources citées ci-dessus
- Module CSSOM View: viewport et dimensions de la fenêtre
- MDN: Screen (Écran)
- Media Queries Level 5: variables d'environnement comme safe-area-inset