risposta breve
Qual è il modo più veloce per confrontare tre breakpoint insieme?
Incolla l'URL in Responsive Preview per vedere mobile (390px), tablet (820px) e desktop (1280px) in tre iframe live con scroll sincronizzato in same-origin. La modalità dispositivo DevTools ridimensiona un viewport alla volta — adatta al debug di una larghezza, più lenta per regressioni tra breakpoint.
confronto
Responsive Preview vs modalità dispositivo DevTools.
| Opzione | Costo | Tre larghezze insieme | Scroll sync | Ideale per |
|---|---|---|---|---|
| Responsive Preview (TDS) | Gratuito | Sì — colonne 390 / 820 / 1280px | Sì in same-origin | Individuare drift di layout tra breakpoint; condividere link preview |
| Modalità dispositivo DevTools del browser | Gratuito (integrato) | No — una larghezza alla volta | N/A | Ispezione approfondita di un viewport, rete e DOM |
| Strumenti multi-viewport a pagamento | Piani a pagamento | Sì | Spesso sì | Team che necessitano preview cloud e collaborazione |
| Comando /responsive-preview Cursor | Gratuito | Screenshot alle tre larghezze | N/A (audit in chat) | Report IA pass/warn/fail in Cursor durante lo sviluppo |
perché affiancati
Perché tre iframe live battono il ridimensionamento uno a uno.
I bug responsive spesso appaiono come drift tra breakpoint — nav che va a capo male su tablet ma non mobile, immagini che traboccano solo a 820px. Cambiare preset DevTools uno a uno fa perdere quel confronto. Iframe live affiancati permettono di scrollare lo stesso stato pagina su tutte e tre le larghezze e individuare subito le discrepanze.
Fix in Cursor copies viewport context from the frame where you spotted the issue, so you can paste it into chat and annotate with Design Mode without re-describing the breakpoint.
come provare
Provalo in meno di un minuto.
- Apri Responsive Preview.
- Incolla l'URL di dev locale (es.
http://localhost:8787/) e clicca Preview. - Scrolla un frame — gli altri seguono quando la sync è disponibile.
- Opzionale: scarica il comando /responsive-preview per screenshot IA in Cursor.
Leggi il walkthrough completo nella Responsive Preview guide.