Come misurare i pixel sullo schermo in Windows
Risposta breve: Windows non ha un righello su schermo. I DevTools misurano dentro il browser, gli editor di immagini dentro la loro tela — per tutto il resto usa uno strumento gratuito come Righello dello schermo: allinea il bordo zero, trascina il marcatore, leggi la distanza in pixel e posa la finestra fantasma sopra l'interfaccia che stai misurando.
Perché misurare sullo schermo
- Scrivere CSS: quella barra laterale è 320 px o 300 px? Misura invece di indovinare, poi imposta il breakpoint correttamente.
- Accessibilità: le aree toccabili dovrebbero essere almeno 44×44 px — il righello verifica entrambe le dimensioni in pochi secondi.
- Controllo di design: confrontare le spaziature di una bozza con la pagina dal vivo, al pixel di cui discutono i designer.
- Presentazioni e stampa: verificare quale area può occupare un'immagine alla risoluzione del proiettore.
- Curiosità con conseguenze: «quanto è larga davvero questa finestra?» prima di scriverci uno script.
Metodo 1: gli strumenti del browser (solo nel browser)
F12 → Ispeziona → passa su un elemento per vederne il box model. Perfetto per il DOM — inutile per un lettore video, un'app desktop, uno screenshot in un visualizzatore o la tua finestra.
Metodo 2: Righello dello schermo — misura qualsiasi cosa, ovunque
Scarica gratis — ScreenRuler-Setup.exe
- Allinea lo zero. Metti il bordo sinistro del righello (modo orizzontale) o il bordo superiore (verticale) dove inizia la misura.
- Trascina la linea marcatore fino all'altro estremo; rifinisci con le frecce — 1 px per pressione, Shift per ×10. Il pulsante «Reimposta il marcatore» lo riporta a zero.
- Rendilo fantasma: opacità al 40 % più «Mantieni in primo piano» posano il righello traslucido proprio sopra l'elemento in questione. Leggi il valore grande —
≈ 482 px.
Note sulla precisione
Un'unità del righello è un pixel dello schermo — lo stesso px che parla il CSS — con scala al 100 %. Con una scala di Windows superiore, tutto sullo schermo, misure comprese, è in pixel scalati; se ti servono numeri non scalati, confronta al 100 %. Lo zoom del browser cambia ciò che misuri: misura al 100 % di zoom.
Domande frequenti
Posso misurare una distanza in diagonale?
No — misura il rettangolo che la racchiude (larghezza in modo orizzontale, altezza in verticale): è quello che i sistemi di layout usano comunque.
Funziona su qualsiasi monitor o scala?
La finestra si sposta su qualsiasi monitor e misura i pixel di quello schermo; la scala si comporta come descritto sopra.
Che differenza c'è con «screenshot + editor»?
Velocità e verità: niente passaggio di cattura, niente errori di zoom — misuri lo schermo vivo così com'è renderizzato adesso.