Online Tool Store
Tester del Livello di Zoom del Browser
Testa il reflow tra il 50% e l'800% di zoom, con calcolatore di larghezza effettiva e rilevamento overflow secondo il limite WCAG 1.4.10 di 320px.
🔒 Questo strumento funziona interamente nel tuo browser. I tuoi file non vengono mai caricati su un server.
Simula lo zoom ridimensionando un layout di esempio alla stessa "larghezza CSS effettiva" che avrebbe un browser reale a quel livello di zoom — un'approssimazione vicina, non un vero motore di rendering. Conferma sempre sul tuo sito con lo zoom reale del tuo browser.
100%
Benvenuto nel nostro negozio
Un breve paragrafo di testo per vedere come il testo si riorganizza e va a capo al variare del livello di zoom simulato.
Come usarlo
- Scegli una larghezza della finestra del browser (1280px corrisponde al punto di riferimento standard WCAG 1.4.10).
- Trascina il cursore dello zoom o fai clic su un preset da 50% a 800% — la larghezza CSS effettiva si aggiorna in tempo reale.
- Osserva i badge superato/fallito: se hai raggiunto il benchmark WCAG di 320px e se il layout di esempio richiede lo scorrimento orizzontale a quella larghezza.
- Passa alla modalità "Larghezza fissa (errore comune)" per vedere come un singolo elemento a larghezza fissa rompe il reflow e fa fallire il controllo.
- Usa la stessa intuizione sul tuo sito, poi verifica con lo zoom reale del browser per un risultato accurato.
FAQ
Questo fa davvero lo zoom del mio browser?
No — ridimensiona un layout di esempio alla stessa "larghezza CSS effettiva" che avrebbe un browser reale con quella larghezza di finestra e livello di zoom, poi verifica l'overflow orizzontale reale. È un'approssimazione vicina, non il motore di rendering del tuo browser reale. Per il tuo sito, conferma sempre con lo zoom reale del tuo browser (Ctrl/Cmd + "+").
Perché WCAG si preoccupa specificamente dello zoom al 400%?
Il criterio di successo 1.4.10 (Reflow) di WCAG 2.1 richiede che il contenuto si riorganizzi in una singola colonna senza necessitare di scorrimento orizzontale a una larghezza effettiva di 320 pixel CSS — la larghezza che si ottiene con una finestra di 1280px zoomata al 400%, motivo per cui 1280px e 400% sono il punto di riferimento standard.
Cos'è la "larghezza effettiva" e come viene calcolata?
La larghezza effettiva è la larghezza della finestra del browser divisa per la percentuale di zoom (ad esempio 1280px ÷ 400% = 320px). Rappresenta quanto spazio in pixel CSS ha realmente il tuo layout una volta applicato lo zoom — lo stesso numero che un browser reale riporterebbe al tuo CSS.
Che problemi di layout emergono tipicamente con zoom elevato?
Contenitori a larghezza fissa che causano scorrimento orizzontale, elementi di navigazione sovrapposti, testo che deborda dal contenitore e pulsanti o schede tagliate sono i problemi più comuni che compaiono solo oltre il 150-200% di zoom. Passa questo strumento alla modalità "Larghezza fissa (errore comune)" per vedere esattamente come appare questo fallimento.
Lo zoom riduce davvero il viewport in pixel CSS?
Sì. La larghezza fisica della finestra del browser in pixel CSS si riduce all'aumentare dello zoom — questo è il meccanismo che questo strumento simula calcolando la larghezza effettiva, ed è per questo che una pagina costruita con larghezze fisse in pixel può iniziare a deborda re orizzontalmente ben prima del 400%.
Come ci confrontiamo
| Funzionalità | Online Tool Store | Tester focalizzati sul reflow | Strumenti di anteprima via URL |
|---|---|---|---|
| Calcolatore di larghezza effettiva (larghezza finestra ÷ zoom %) | ✓ | ✓ | ✗ |
| Controllo in tempo reale dell'overflow orizzontale (superato/fallito) | ✓ | ✓ | ✗ |
| Preset di zoom fino a 800% con reflow in tempo reale | ✓ | ✓ | ✗ |
| Non serve alcun URL esterno o embedding (funziona istantaneamente, nessun blocco X-Frame-Options) | ✓ | ✓ | ✗ |
Un rapido passaggio di verifica prima di aprire i veri strumenti di sviluppo del browser e zoomare sulla tua pagina live.