Quelle est ma résolution d’écran ?
Quelle résolution a mon écran – et quel espace une page web obtient-elle réellement dans la fenêtre du navigateur ? Toutes les valeurs sont mesurées directement dans votre navigateur et se mettent à jour en direct lorsque vous redimensionnez la fenêtre, zoomez ou faites pivoter votre appareil.
Source : MDN Web Docs – Screen. Mise à jour : .
Comment le calcul est fait
Il n’existe pas qu’une seule bonne réponse à « quelle est ma résolution d’écran » : les pixels physiques de l’écran, les pixels CSS avec lesquels travaille le navigateur, et le viewport – l’espace qu’une page web obtient réellement. Cet outil affiche les trois côte à côte.
Connaître sa résolution d’écran en 3 étapes
- Ouvrez cette page : la résolution en pixels physiques et en pixels CSS s’affiche aussitôt.
- Redimensionnez la fenêtre, zoomez ou tournez l’appareil : viewport, zoom et breakpoint se mettent à jour en direct.
- Lisez le devicePixelRatio, le ratio et la surface disponible hors barre des tâches.
Exemple : un portable de 1920 × 1080 pixels avec une mise à l’échelle Windows de 125 % renvoie, avec un zoom du navigateur à 100 %, un devicePixelRatio de 1,25. En pixels CSS, cela fait 1920 ÷ 1,25 = 1536 et 1080 ÷ 1,25 = 864, soit 1536 × 864.
Ce que signifient les valeurs
- Pixels physiques : taille de l’écran en pixels CSS × devicePixelRatio. Un ordinateur portable Full HD à 125 % de mise à l’échelle annonce 1536 × 864 pixels CSS – × 1,25 donne les 1920 × 1080 réels.
- devicePixelRatio : le nombre de pixels physiques qui composent un pixel CSS. 1 = écran classique, 2 ou 3 = écran Retina ou de téléphone. Le zoom du navigateur et la mise à l’échelle de l’affichage Windows modifient tous deux cette valeur.
- Disponible : l’écran moins la barre des tâches ou le Dock.
- Viewport : la taille intérieure de la fenêtre du navigateur (
innerWidth × innerHeight) – c’est à cela que réagissent les media queries et les mises en page adaptatives. La zone visible (visual viewport) est plus petite sur téléphone lorsque vous zoomez avec deux doigts ou que le clavier est ouvert. - Format d’image : réduit exactement (1920 × 1080 = 16:9) et, pour les valeurs impaires, le nom courant (1366 × 768 ≈ 16:9).
- Breakpoint : quel palier de Bootstrap 5 (sm à partir de 576, md à partir de 768, lg à partir de 992, xl à partir de 1200, xxl à partir de 1400 px) et de Tailwind CSS (sm à partir de 640, md à partir de 768, lg à partir de 1024, xl à partir de 1280, 2xl à partir de 1536 px) s’applique à la largeur de fenêtre actuelle.
Résolutions courantes
| Nom | Pixels | Ratio |
|---|---|---|
| HD (720p) | 1280 × 720 | 16:9 |
| HD / WXGA | 1366 × 768 | ≈ 16:9 |
| Full HD (1080p) | 1920 × 1080 | 16:9 |
| WUXGA | 1920 × 1200 | 16:10 |
| QHD / WQHD (1440p) | 2560 × 1440 | 16:9 |
| UWQHD | 3440 × 1440 | ≈ 21:9 |
| 4K UHD | 3840 × 2160 | 16:9 |
Limites
Les navigateurs arrondissent parfois les pixels CSS vers le bas, si bien que les pixels physiques peuvent être décalés d’une unité (2561 au lieu de 2560). Avec plusieurs écrans, le navigateur signale celui sur lequel se trouve actuellement la fenêtre. Firefox avec la protection contre le fingerprinting activée (resistFingerprinting) peut volontairement annoncer des valeurs standard.
Autres vérifications : navigateur et système avec quel est mon user agent, adresse publique avec quelle est mon adresse IP et dimensions d’image avec l’outil pour calculer le ratio d’une image.
Questions fréquentes
Comment connaître ma résolution d’écran ?
Ouvrez simplement cette page : la résolution en pixels physiques s’affiche en haut, suivie des valeurs en pixels CSS et de la taille de votre fenêtre de navigateur. Sous Windows, vous la trouvez aussi dans Paramètres → Système → Affichage → Résolution d’affichage.
Pourquoi mon navigateur affiche-t-il 1536 × 864 au lieu de 1920 × 1080 ?
Parce que Windows est mis à l’échelle à 125 % (ou que le zoom du navigateur n’est pas à 100 %). Le navigateur travaille alors en pixels CSS : 1920 ÷ 1,25 = 1536. Les pixels physiques sont affichés en haut – ce sont les pixels CSS × devicePixelRatio.
Quelle est la différence entre résolution d’écran et viewport ?
La résolution d’écran est la taille de tout l’affichage. Le viewport n’est que la zone intérieure de la fenêtre du navigateur, sans barre d’onglets, barre d’adresse ni barre des tâches. Pour le design web et les media queries, c’est le viewport qui compte.
Que signifie un devicePixelRatio de 2 ou 3 ?
Votre écran est haute densité (Retina) : un pixel CSS est composé de 2 × 2 ou 3 × 3 pixels physiques. Le texte et les images paraissent plus nets, tandis que les mises en page conservent la même taille.
Mes données sont-elles stockées ?
Non. Toutes les valeurs sont lues et affichées uniquement dans votre navigateur ; rien n’est envoyé ni stocké.
Sources et références juridiques
- MDN Web Docs – Screen
- MDN Web Docs – Window.devicePixelRatio
- MDN Web Docs – Visual Viewport API
- MDN Web Docs – prefers-color-scheme
- Bootstrap 5.3 – Breakpoints
- Tailwind CSS – Responsive design
Dernière mise à jour : · Principes éditoriaux
Outils similaires
- Quel est mon user agent ?Affichez votre user agent et détectez navigateur, version, moteur, OS et type d’appareil, plus les Client Hints. Analysez aussi un autre user agent. En local.
- Quelle est mon adresse IP ?Affiche instantanément votre adresse IP publique, détecte IPv4 ou IPv6 et explique la différence. Gratuit – votre IP n’est pas stockée.
- Test webcam : vérifiez votre caméraTest webcam gratuit dans le navigateur : image en direct, résolution et fréquence réelles, de 480p à 4K, miroir, photo. Aucun envoi en ligne.
- Test clavier : toutes les touches fonctionnent-elles ?Testez votre clavier en ligne : chaque touche pressée s’allume, les touches testées restent marquées. Avec key/code et un test de ghosting. Gratuit.
- Calcul de sous-réseau IPv4 : réseau, broadcast, plage d’hôtesCalcul de sous-réseau IPv4 en notation CIDR : adresse réseau, broadcast, plage d’hôtes, masque, masque inverse et nombre d’hôtes, en binaire et avec découpage.
- Minifier du JavaScriptMinifier JavaScript : retirez commentaires et espaces, réduisez le code et voyez le gain en octets. Dans le navigateur, sans envoi.
- Coloration syntaxiqueColoration syntaxique en ligne : collez du code, choisissez les couleurs pour JavaScript, JSON, HTML, CSS, SQL, Python ou Bash et copiez le HTML obtenu.
- Calculateur CSS clampCalculateur CSS clamp pour tailles de police et espacements fluides : saisissez valeur minimale, maximale et plage de viewport, copiez la valeur clamp() prête.
- JSON escape / unescapeJSON escape et unescape en ligne : transformez un texte en chaîne JSON valide (guillemets, barres obliques inverses et sauts de ligne échappés) ou l’inverse.