Righello in pixel gratuito
Misura distanze in pixel sul tuo schermo.
Come usare
- Clicca e trascina sul righello per misurare una distanza. Il righello mostra incrementi in pixel.
- I punti di inizio e fine sono trascinabili, afferrali per regolare la misura.
- Attiva la modalità verticale per misurare distanze verticali invece che orizzontali.
- Visualizza il conteggio pixel e la dimensione fisica stimata sotto il righello.
Domande frequenti
Quanto è accurato il calcolo della dimensione fisica?
La dimensione fisica si basa sul rapporto pixel del tuo dispositivo e su un valore DPI presunto di 96. Il DPI effettivo dei monitor varia, quindi è un'approssimazione. Per misure precise su materiale stampato, usa un righello fisico.
Posso misurare distanze verticali?
Sì. Attiva la modalità verticale per misurare distanze verticali in pixel anziché orizzontali.
Cosa significa Device Pixel Ratio?
Gli schermi ad alta densità (come i display Retina) hanno un rapporto pixel maggiore di 1, ovvero più pixel fisici rappresentano un pixel CSS. Questo strumento misura in pixel CSS.
Cosa misura questo righello (e cosa non può fare)
È un righello a forma libera che risiede all'interno della scheda del browser. Trascinare sul canvas sopra per ottenere una lettura in pixel CSS. Funziona su qualsiasi cosa disegnata all'interno del viewport del browser (uno screenshot aperto in una scheda, un'esportazione di Figma visualizzata inline, una pagina web live in una seconda scheda), ma non può misurare le finestre del desktop, l'interfaccia delle app native, la barra delle applicazioni o qualsiasi cosa disegnata dal compositore del sistema operativo al di fuori del browser. Non può nemmeno rilevare automaticamente i confini degli elementi come fanno Chrome DevTools o Page Ruler Redux. Quello è un tipo di strumento diverso. La chiarezza conta: questo righello è la risposta giusta quando si vuole una misurazione rapida, senza installazioni, all'interno del browser.
I pixel CSS non sono punti hardware
Il pixel usato da JavaScript e CSS è un pixel di riferimento definito dal W3C: «l'angolo visivo di un pixel su un dispositivo con una densità di pixel di 96 dpi e a una distanza dal lettore pari all'estensione di un braccio.» Per una lunghezza nominale del braccio di circa 28 pollici, quell'angolo visivo è circa 0,0213°, o circa 0,26 mm alla superficie dello schermo. Il pixel CSS è un'unità di angolo visivo, non un punto hardware, intenzionalmente indipendente dal dispositivo in modo che un font da 16 px abbia all'incirca la stessa dimensione fisica su un telefono, un laptop e una TV.
Tutte le altre lunghezze CSS assolute sono ancorate ad esso: 1in = 2.54cm = 96px, 1mm ≈ 3.78px, 1pt ≈ 1.333px. Questa tabella di conversione fissa è esattamente ciò che rende la lettura «mm a 96 DPI» una stima piuttosto che una vera misurazione; vedere di seguito.
Tre termini di pixel che i designer confondono
| Termine | Cosa misura | Dove si trova |
|---|---|---|
| Pixel CSS | Il pixel di riferimento W3C; l'unità usata da JS e CSS per il layout | window.innerWidth, getBoundingClientRect(), ogni lunghezza CSS |
| Pixel del dispositivo | Il punto effettivamente indirizzabile sul pannello | screen.width × devicePixelRatio, risoluzione nativa del monitor |
| Pixel dell'immagine | La risoluzione intrinseca di un file raster | naturalWidth / naturalHeight su un <img> |
La relazione in una frase: risoluzione fisica dello schermo ≈ dimensione CSS del viewport × device pixel ratio, e un'immagine nitida necessita di una larghezza intrinseca ≥ larghezza CSS renderizzata × DPR. Un logo con dimensioni CSS di 100 px su un telefono con DPR 3 necessita di un'immagine sorgente di almeno 300 pixel di larghezza per apparire nitido.
Rapporto pixel del dispositivo
La lettura del DPR nel pannello informativo riporta window.devicePixelRatio: «il rapporto tra la risoluzione in pixel fisici e la risoluzione in pixel CSS per il dispositivo di visualizzazione corrente.» Valori comuni:
- 1,0: display classici a 96 DPI (monitor più vecchi, macchine Windows al 100% di scala).
- 2,0: la maggior parte dei MacBook Retina, molti monitor 4K al 200% di scala.
- 2,5-3,5: telefoni moderni. I modelli iPhone Pro riportano 3,0; gli Android di punta si trovano spesso a 2,625 / 2,75 / 3,5.
Due comportamenti da conoscere: lo zoom della pagina (Ctrl/Cmd + e −) cambia effettivamente il DPR, quindi la lettura salterà durante lo zoom. Il pinch-zoom ingrandisce il viewport renderizzato senza modificare la dimensione del pixel CSS sottostante, quindi non lo fa. Apple ha introdotto il display Retina sull'iPhone 4 nel 2010, e per evitare che le app e le pagine esistenti si riducessero a un quarto delle dimensioni precedenti quando i pixel del dispositivo raddoppiarono in entrambe le dimensioni, iOS ha introdotto i «punti» (il suo equivalente del pixel CSS). Il web ha ereditato lo stesso modello: un pixel CSS 2× corrisponde a quattro pixel del dispositivo.
Standard per le dimensioni dei tap target
Una delle cose più utili che un righello pixel fa è verificare che pulsanti, link e icone soddisfino i minimi di tap target per l'accessibilità. Tre standard si presentano di solito insieme:
| Fonte | Minimo | Unità | ~Fisico (96 DPI) |
|---|---|---|---|
| WCAG 2.2 SC 2.5.8 AA | 24 × 24 | CSS px | ~6.4 × 6.4 mm |
| WCAG 2.5.5 AAA | 44 × 44 | CSS px | ~11.6 × 11.6 mm |
| Apple HIG | 44 × 44 | pt | ~11.6 × 11.6 mm |
| Material Design / Android | 48 × 48 | dp | ~9 mm (riferimento 160 dpi) |
WCAG 2.2 ha aggiunto il criterio 24 × 24 AA nell'ottobre 2023. Il test di conformità W3C lo formula così: «Deve essere concettualmente possibile disegnare un quadrato solido di pixel CSS 24 per 24… completamente all'interno del target.» Esistono cinque eccezioni (spaziatura, equivalente, inline, controllo dello user agent, essenziale), ma in generale l'interfaccia utente del corpo deve rispettare quel limite. Il criterio AAA precedente (2.5.5) richiede 44 × 44, corrispondente all'HIG di Apple e approssimativamente al 48 dp di Material.
La griglia di design da 8 pixel
La maggior parte del design UI moderno si basa su un'unità di base da 8 pixel (la «griglia a 8 punti» o «griglia a 8 dp» a seconda della piattaforma). Material Design 2 e 3 si costruiscono entrambi su di essa, con aggiustamenti più piccoli da 4 dp per icone e componenti densi. La scelta dell'8 non è casuale: si divide in modo pulito nelle larghezze schermo comuni (320, 360, 375, 1280, 1440), scala con rapporti interi (8, 16, 24, 32, 40, 48) e si abbina naturalmente al corpo testo predefinito da 16 px. Una sotto-griglia da 4 pixel gestisce l'allineamento fine.
Uso pratico: quando si misura un gap di 14 px o 17 px, probabilmente si è intercettato un errore di unità CSS. Il valore previsto era quasi certamente 16. Il righello pixel è il modo più rapido per individuare spaziature fuori griglia.
Quando si userebbe un righello browser
- QA del design su una pagina pubblicata. Confrontare il risultato live con le specifiche. Il gap tra due card è di 16 px o 24 px?
- Verifica del tap target. Posizionare il righello su un pulsante per confermare che soddisfi il limite AA di 24 px o il target AAA di 44 px.
- Audit della spaziatura su un mockup incollato. Aprire un'esportazione di Figma in una scheda, posizionare il righello, verificare il ritmo.
- Verifica rapida dei breakpoint responsive. La lettura della larghezza del viewport funge anche da indicatore live dei breakpoint mentre si ridimensiona la finestra.
- Formazione. Mostrare a un junior developer cosa riporta
devicePixelRatiosulla propria macchina e come cambia quando si usa Cmd/Ctrl + per eseguire lo zoom. - Audit di accessibilità. Verificare le aree di clic dei pulsanti icona, la lunghezza delle righe in pixel CSS e le dimensioni minime del testo.
DevTools del browser e altri righelli
Ogni browser moderno dispone di strumenti di misurazione, ma sono nascosti dietro i pannelli sviluppatore.
- Chrome DevTools: aprire il menu dei comandi (Cmd/Ctrl+Shift+P), digitare «rulers», selezionare Show rulers on hover. I righelli compaiono lungo la parte superiore e sinistra del viewport quando si passa il mouse su un elemento. Legati alla selezione dell'elemento piuttosto che al trascinamento libero.
- Firefox DevTools: Impostazioni → Pulsanti disponibili della cassetta degli attrezzi → abilitare Toggle rulers for the page. Nella barra degli strumenti DevTools compare un pulsante per attivare il righello; i righelli si sovrappongono ai bordi della pagina con le dimensioni del viewport in alto a destra.
- Figma / Sketch / Adobe XD: tutti hanno righelli sovrapposti all'interno del loro canvas. Figma usa Shift+R per attivarli/disattivarli. Sono legati ai file: misurano all'interno del proprio modello di documento, non su una pagina web distribuita.
- Estensioni browser: Page Ruler Redux, MeasureIt, PixelZoomer, Dimensions. Tutte richiedono installazione e permessi; tutte rimangono confinate al browser. Utili se è necessario il rilevamento automatico degli elementi.
Un righello in scheda del browser come questo è la risposta per i designer, i revisori QA e i professionisti dei contenuti che vogliono un singolo clic piuttosto che i pannelli DevTools o l'installazione di estensioni.
Altre domande
Quanto è accurata la lettura in millimetri?
È una stima. La conversione usa la relazione W3C fissa 1 in = 96 pixel CSS, accurata solo quando il monitor è davvero a 96 DPI, lo zoom del browser è al 100% e il ridimensionamento del sistema operativo è al 100%. I monitor reali variano notevolmente: un pannello 1080p da 24 pollici raggiunge circa 92 ppi, un 1440p da 27 pollici circa 109 ppi, un 4K da 27 pollici circa 163 ppi. Trattare il numero in mm come una stima approssimativa, mai come una misurazione di qualità professionale. Per le dimensioni fisiche reali, appoggiare un righello fisico allo schermo.
Perché il rapporto pixel del dispositivo cambia quando si esegue lo zoom?
Lo zoom della pagina (Cmd/Ctrl + o −) cambia letteralmente la dimensione di un pixel CSS rispetto al pixel del dispositivo, quindi il rapporto tra essi si sposta. Il pinch-zoom sui dispositivi touch funziona diversamente: ingrandisce il viewport renderizzato senza modificare la dimensione del pixel CSS sottostante, quindi non sposta il DPR.
Perché 1366 × 768 non è esattamente 16:9?
Perché in realtà non lo è. 1366 ÷ 768 = 1.7786; il vero 16:9 è 1.7778. Il rapporto semplificato è in realtà 683:384. Molti pannelli laptop economici usano questa risoluzione leggermente fuori specifica, il che è uno dei motivi per cui il video 1080p a volte viene ridimensionato in modo imperfetto su di essi.
Posso misurare al di fuori del browser?
No. Una pagina web può vedere e disegnare solo all'interno della propria scheda del browser. Per misurare le finestre del desktop, l'interfaccia delle app native o qualsiasi altra cosa al di fuori del browser, sarebbe necessario un'utilità a livello di sistema operativo: la funzione «Show Inspector» di Preview su macOS, lo Strumento di cattura di Windows con la sovrapposizione delle dimensioni o un righello per schermo di terze parti.
Vengono inviati dati a un server?
No. Il righello viene renderizzato con l'API canvas HTML5; le dimensioni del viewport e il DPR provengono da JavaScript localmente; la lettura della misurazione viene calcolata nel browser. La pagina funziona offline una volta caricata.