Visualizzatore responsive

Testare i design responsive tradizionalmente significa ridimensionare la finestra del browser o usare la barra dei dispositivi dei DevTools per passare da una dimensione di viewport all'altra, una alla volta. Funziona, ma puoi vedere una sola dimensione per volta — rendendo impossibile confrontare come appare una sezione su mobile rispetto a desktop simultaneamente. Responsive Viewer risolve questo problema renderizzando la pagina in più viewport contemporaneamente, visualizzati fianco a fianco sul tuo schermo.

Scegli tra profili di dispositivo preimpostati (iPhone 15, iPad Pro, Pixel 8, MacBook, Desktop 1440p) oppure inserisci dimensioni personalizzate. Ogni viewport è un'istanza completamente renderizzata della pagina, non uno screenshot statico — scorri uno e tutti gli altri scorrono fino alla stessa posizione. Questo scorrimento sincronizzato ti permette di confrontare esattamente la stessa area di contenuto su tutte le dimensioni di dispositivo con un solo sguardo.

È il modo più rapido per individuare problemi di responsività: navigazione che va a capo in modo scorretto, immagini che escono dai loro contenitori, testo che diventa illeggibile su schermi piccoli, o spaziature che collassano in modo goffo. Ogni viewport può essere ruotato tra verticale e orizzontale in modo indipendente, un aspetto importante per tablet e dispositivi pieghevoli, dove entrambi gli orientamenti sono situazioni reali comuni. Le dimensioni di viewport personalizzate che aggiungi vengono ricordate per la sessione successiva, così l'insieme specifico di breakpoint di un progetto non deve essere reinserito ogni volta che apri lo strumento.