Comment mesurer les pixels à l'écran sous Windows
Réponse courte : Windows n'a pas de règle d'écran intégrée. Les DevTools mesurent dans le navigateur, les éditeurs d'images sur leur canevas — pour tout le reste, prenez un outil gratuit comme Règle d'écran : alignez le bord zéro, faites glisser le repère, lisez la distance en pixels, et posez la fenêtre en fantôme sur l'interface mesurée.
Pourquoi mesurer à l'écran
- Écrire du CSS : cette barre latérale fait-elle 320 px ou 300 px ? Mesurez au lieu de deviner, puis réglez le point de rupture correctement.
- Accessibilité : les cibles tactiles devraient faire au moins 44×44 px — la règle vérifie les deux dimensions en quelques secondes.
- Recette design : comparer les espacements d'une maquette à la page en direct, au pixel près.
- Présentations et impression : vérifier quelle surface une image peut occuper à la résolution du vidéoprojecteur.
- Curiosité aux conséquences : « quelle est la largeur réelle de cette fenêtre ? » — avant de scripter quoi que ce soit pour elle.
Méthode 1 : les outils du navigateur (dans le navigateur uniquement)
F12 → Inspect → survolez un élément pour voir son modèle de boîte. Parfait pour le DOM — inutile pour un lecteur vidéo, une application de bureau, une capture dans une visionneuse ou votre propre fenêtre.
Méthode 2 : Règle d'écran — mesure tout, partout
Télécharger gratuitement — ScreenRuler-Setup.exe
- Alignez le zéro. Placez le bord gauche de la règle (mode horizontal) ou le bord supérieur (mode vertical) là où commence la mesure.
- Faites glisser le repère jusqu'à l'autre extrémité ; peaufinez aux flèches — 1 px par appui, Shift pour ×10. Le bouton « Réinitialiser le repère » le ramène à zéro.
- Rendez-le fantôme : curseur d'opacité à 40 % plus « Toujours au premier plan » posent la règle translucide directement sur l'élément en question. Lisez la grande valeur —
≈ 482 px.
Notes de précision
Une unité de règle est un pixel d'écran — le même px que parle le CSS — quand la mise à l'échelle est à 100 %. À une mise à l'échelle Windows supérieure, tout à l'écran, mesures comprises, est en pixels mis à l'échelle ; s'il vous faut des chiffres non mis à l'échelle, comparez à 100 %. Le zoom du navigateur change ce que vous mesurez : mesurez à 100 % de zoom.
Questions fréquentes
Puis-je mesurer une distance en diagonale ?
Non — mesurez plutôt le rectangle englobant (largeur en mode horizontal, hauteur en vertical) : c'est ce que les systèmes de mise en page utilisent de toute façon.
Est-ce que ça marche sur n'importe quel écran ou mise à l'échelle ?
La fenêtre se déplace sur n'importe quel moniteur et mesure les pixels de cet écran ; la mise à l'échelle se comporte comme décrit ci-dessus.
Quelle différence avec « capture d'écran + éditeur » ?
Vitesse et vérité : pas d'étape de capture, pas d'erreurs de zoom — vous mesurez l'écran vivant, tel qu'il est rendu à cet instant.