Screenshot del viewport

Uno screenshot del viewport cattura solo la parte di una pagina web visibile nella finestra del browser, cioè il viewport, alla sua dimensione corrente e alla posizione di scorrimento attuale. Il contenuto sopra o sotto l'area visibile non è incluso. La dimensione dell'immagine è uguale alle dimensioni del viewport moltiplicate per il fattore di scala del dispositivo, ad esempio 1920×1080 a 1x o 3840×2160 a 2x.

Nello sviluppo web, il viewport è l'area in cui la pagina viene renderizzata, misurata in pixel CSS. Esclude gli elementi del browser come la barra delle schede e la barra degli indirizzi. Uno screenshot del viewport mostra quindi la pagina come la vede per primo un visitatore, senza l'interfaccia del browser attorno.

Screenshot del viewport e screenshot a pagina intera

Uno screenshot del viewport mostra una schermata di contenuto, la stessa che vede un visitatore all'arrivo. Uno screenshot a pagina intera renderizza l'intero documento dall'alto in basso in un'unica immagine. Le catture del viewport sono più piccole, più veloci e più facili da confrontare. Le catture a pagina intera mostrano tutto, ma possono essere molto alte e possono rompere layout costruiti sull'altezza del viewport.

Dove si usano gli screenshot del viewport

• Verifica della prima schermata di una landing page.
• Miniature e anteprime dei link.
• Test di regressione visiva focalizzati su intestazione e area principale.
• Verifiche responsive a dimensioni di dispositivo fisse.

Dimensioni del viewport e cattura responsive

La larghezza del viewport decide quale layout responsive mostra la pagina. Un viewport largo 390 pixel attiva il layout da telefono, mentre 1920 mostra il layout desktop. Temposhot Website Capture offre Desktop 1920×1080, Tablet 768×1024 e Mobile 390×844, con Area impostata su Viewport o Full page per ogni URL.

Errori comuni con gli screenshot del viewport

• Catturare prima che la pagina finisca di caricarsi o di animarsi.
• Lasciare un banner dei cookie che copre il viewport.
• Aspettarsi che compaia il contenuto sotto la piega.
• Confrontare catture fatte con fattori di scala diversi.

Ripeti gli stessi screenshot più volte?

Aggiungi gli URL a Website Capture, imposta Viewport e un dispositivo, e avvia un'esecuzione con fino a 10 Concurrent browsers. Vedi opzioni di cattura.

Domande frequenti

Cosa significa "sopra la piega"?

Il contenuto visibile senza scorrere, che è ciò che mostra uno screenshot del viewport.

Uno screenshot del viewport include la barra degli indirizzi?

No. Contiene solo la pagina renderizzata.

Fonti

• Viewport (MDN glossary)
• Playwright screenshots guide

Risorse correlate

• Avvio rapido di Website Capture: prima esecuzione con un elenco di URL.
• Opzioni di Website Capture: impostazioni di dispositivo, area e attesa.
• Controllo della risoluzione degli screenshot: verifica la dimensione dell'immagine.