Screenshot responsive
Cosa sono gli screenshot responsive, le dimensioni del viewport più usate ed errori da evitare quando si cattura su più dispositivi.
Uno screenshot responsive è la cattura di una pagina web renderizzata a una larghezza e un'altezza del viewport specifiche, di solito come insieme a più dimensioni. I siti responsive usano media query CSS, container query e layout flessibili, quindi lo stesso URL può mostrare una navigazione, un numero di colonne e un ritaglio delle immagini diversi a ogni larghezza.
Un browser produce il layout da telefono solo quando il viewport stesso è stretto. Rimpicciolire uno screenshot desktop non cambia il layout. Gli strumenti quindi impostano la dimensione del viewport, e spesso il fattore di scala del dispositivo e lo user agent, prima che la pagina venga caricata.
Perché gli screenshot responsive sono importanti
Le revisioni di design, l'approvazione del cliente e il QA richiedono prove di come appare una pagina a ogni breakpoint. Un bug di layout spesso compare solo a una larghezza, ad esempio un menu che si sovrappone al logo sui tablet. Un insieme di catture a dimensioni fisse rende visibili quei bug in un'unica revisione.
Dimensioni comuni del viewport
| Classe | Viewport di esempio |
|---|---|
| Desktop | 1920×1080, 1440×900, 1366×768 |
| Tablet | 768×1024 in verticale |
| Telefono | 390×844, 360×800 |
Le dimensioni sono in pixel CSS. Un telefono con scala 3x renderizza 390×844 pixel CSS con 1170×2532 pixel fisici.
Come catturare screenshot responsive
- In un browser, apri gli strumenti per sviluppatori, passa alla modalità dispositivo e scegli una dimensione.
- Nel codice, imposta il viewport in Playwright o Puppeteer prima della navigazione.
- In Temposhot Website Capture (Command+2), scegli un Device: Desktop 1920×1080, Tablet 768×1024 o Mobile 390×844. Ogni riga di URL può avere il proprio device e la propria Area, e Render preview mostra una riga prima dell'esecuzione completa.
Errori comuni con gli screenshot responsive
- Ridimensionare una cattura desktop invece di renderizzare alla larghezza di destinazione.
- Mescolare catture di viewport e a pagina intera nello stesso insieme di confronto.
- Lasciare un banner dei cookie che copre metà del layout da telefono.
- Confrontare catture fatte con fattori di scala diversi.
Ripeti gli stessi screenshot più volte?
Aggiungi ogni URL una volta per dispositivo in Website Capture ed esegui l'elenco in un unico passaggio. Vedi opzioni di cattura.
Domande frequenti
Uno screenshot responsive è uguale a uno screenshot mobile?
No. Uno screenshot mobile è una sola dimensione. Gli screenshot responsive sono un insieme di più dimensioni.
Serve un telefono reale?
Per verificare il layout, di solito basta un browser con il viewport da telefono. I bug specifici di un dispositivo richiedono comunque un dispositivo reale.
Fonti
Risorse correlate
- Avvio rapido di Website Capture: prima esecuzione con un elenco di URL.
- Esecuzioni e risultati: stati delle righe e nuovi tentativi.
- Calcolatore del rapporto di aspetto: verifica le proporzioni di una dimensione.
Ripeti sempre gli stessi screenshot?
Temposhot cattura a intervalli di tempo una schermata, una finestra o un'area e esporta il set come PDF, immagini, ZIP o MP4. Gli strumenti gratuiti online gestiscono le singole immagini.
Risorse correlate
Termini correlati
- Screenshot del viewportCos'è uno screenshot del viewport, in cosa differisce dalla cattura a pagina intera e quando è la scelta giusta.
- Screenshot a pagina interaCos'è uno screenshot a pagina intera, in cosa differisce dalle catture di viewport e di scorrimento e quando usarlo.
- Mockup di dispositivoCos'è un mockup di dispositivo, come inserire screenshot nelle cornici dei dispositivi e dove lo usano i team.
- Screenshot in batchCosa sono gli screenshot in batch, in cosa differiscono dalle catture singole e dove vengono usati dai team.