Test Responsive: controlla ogni viewport | QA Proof Skip to main content
Test Responsive

Trova il breakpoint che rompe la tua pagina

QA Proof renderizza la tua pagina alle larghezze desktop, tablet e mobile, poi segnala rotture di layout, contenuti in overflow e touch target troppo piccoli da toccare.

Inizia gratis Vedi i prezzi →

Piano gratuito disponibile · Nessuna carta di credito

3 viewport testati
Desktop 1440px
95
Tablet 768px
78
Mobile 390px
92
Touch target
88

Il tablet non lo prova nessuno

Quasi tutti i team controllano una pagina sul proprio laptop e su un telefono, poi pubblicano. È nelle larghezze intermedie che le cose si rompono in silenzio — una nav che va a capo, una tabella in overflow, un pulsante troppo piccolo da centrare con il pollice. Gli utenti se ne accorgono prima di te.

Come funziona

1

Inserisci il tuo URL

Basta l'URL di una pagina — niente script, niente device lab, niente estensioni del browser.

2

Renderizziamo tre viewport

Desktop, tablet e mobile vengono renderizzati in un browser reale alle larghezze effettive dei dispositivi.

3

Guarda cosa si è rotto

Ogni viewport riceve il proprio punteggio, più un elenco dei problemi di layout con le media query suggerite.

Cosa controlliamo a ogni larghezza

Tre viewport reali

Desktop, tablet e mobile renderizzati alle larghezze effettive dei dispositivi — non una finestra del browser schiacciata via CSS.

Validazione dei touch target

Segnala ogni elemento interattivo sotto il minimo di 44×44px richiesto dalle linee guida per un tocco affidabile.

Rilevamento degli overflow

Intercetta scroll orizzontale, testo tagliato ed elementi spinti fuori dal viewport.

Media query consigliate

Regole di breakpoint suggerite per ogni problema, pronte da inserire nel foglio di stile.

Punteggio per viewport

Vedi a colpo d’occhio qual è la larghezza debole, invece di ricevere un unico numero medio.

Accesso API

Avvia i controlli responsive dalla CI, così un layout mobile rotto non arriva mai su main.

Chi lo usa

Sviluppatori frontend

Intercetta i problemi di breakpoint che altrimenti scopriresti trascinando avanti e indietro la finestra del browser.

QA engineer

Copri tre viewport a ogni release senza mantenere un device lab.

Team ecommerce

La maggior parte del tuo traffico è mobile. Assicurati che lì il checkout funzioni davvero.

Domande frequenti

Di default desktop a 1440px, tablet a 768px e mobile a 390px — le larghezze che rappresentano la maggior parte del traffico reale. Ognuna viene renderizzata in un browser reale, non simulata ridimensionando la finestra.
Le linee guida di accessibilità fissano un minimo di 44×44px per gli elementi toccabili, perché i target più piccoli causano tocchi imprecisi, soprattutto per utenti con difficoltà motorie. I touch target piccoli sono anche una delle cause più comuni di mancata conversione su mobile.
Renderizziamo con un motore di browser reale alle larghezze effettive dei dispositivi, il che intercetta problemi di layout, overflow e touch target. Comportamenti legati all’hardware, come le stranezze della toolbar di Safari su iOS, richiedono ancora un dispositivo fisico.
Circa 20 secondi per tutti e tre i viewport.
Le pagine devono essere raggiungibili pubblicamente perché il renderer possa caricarle. Per gli ambienti di staging, autorizza le nostre richieste in allowlist oppure esponi la pagina a un URL pubblico temporaneo.

Scopri il resto della piattaforma

Fedeltà al Design Confronta i design Figma con le pagine live, differenza per differenza. Audit di Accessibilità Verifiche di conformità WCAG 2.1 con report delle violazioni e correzioni. Regressione Visiva Confronti programmati degli screenshot rispetto a baseline approvate. Audit di Design Coerenza dei design token e il tuo Design Debt Score.

Testa la tua pagina su ogni viewport

Piano gratuito, nessuna carta di credito, tre viewport in circa 20 secondi.

Inizia gratis