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

  1. 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.
  2. 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.
  3. 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.