Viewport

Il viewport è l'area visibile di una pagina web o applicazione sullo schermo di un utente in un dato momento. Su un computer desktop, il viewport corrisponde alla finestra del browser meno le barre degli strumenti, le barre di scorrimento e il chrome del browser. Su tablet e smartphone, il viewport è l'intera area dello schermo che il browser può utilizzare. Il viewport determina come il contenuto viene scalato, disposto e presentato al lettore. In HTML, il tag `<meta name="viewport">` comunica al browser come controllare le dimensioni e la scalatura della pagina, costituendo la base del [design responsivo](/glossary/responsive-design).

I contenuti che ignorano le differenze di viewport offrono un'esperienza di lettura scadente su determinati dispositivi. Il testo può risultare illeggibilmente piccolo sui telefoni, i pulsanti impossibili da toccare, oppure può essere necessario lo scorrimento orizzontale per vedere l'intera pagina. Dato che i dispositivi mobili rappresentano ormai la maggior parte del traffico web, le pubblicazioni che non si adattano alle diverse dimensioni del viewport perdono lettori e appaiono poco professionali. Anche i motori di ricerca considerano la compatibilità mobile nel ranking, quindi una corretta gestione del viewport influenza sia l'esperienza utente che la visibilità nei risultati di ricerca.

Le pubblicazioni FlipLink sono completamente responsive e si adattano automaticamente a qualsiasi dimensione di viewport. Il visualizzatore di [flipbook](/glossary/flipbook) rileva le dimensioni del viewport disponibili e regola il rendering delle pagine, la posizione dei controlli e i livelli di zoom di conseguenza. Su viewport desktop ampi, le pubblicazioni vengono mostrate in un [formato a doppia pagina](/glossary/page-spread). Su viewport mobili stretti, passano a una visualizzazione a pagina singola con navigazione touch-friendly. Le impostazioni dell'[esperienza di pagina](/features/page-experience-and-layout) consentono agli editori di scegliere tra diverse modalità di layout, e FlipLink gestisce i calcoli del viewport per mantenere il contenuto sempre leggibile e ben proporzionato. Quando incorporate un flipbook utilizzando il codice di [incorporamento responsivo](/features/sharing-and-distribution), questo riempie automaticamente il suo contenitore e risponde ai cambiamenti del viewport — inclusa la rotazione del dispositivo — senza alcuna configurazione aggiuntiva.

Il viewport è controllato dal meta tag HTML `<meta name="viewport" content="width=device-width, initial-scale=1">`. Questo tag indica al browser di impostare la larghezza della pagina uguale alla larghezza dello schermo del dispositivo e di iniziare con zoom 1x. Senza di esso, i browser mobili renderizzano le pagine a una larghezza virtuale di circa 980 pixel e poi rimpiccioliscono il risultato per adattarlo, rendendo il testo minuscolo e le interazioni difficoltose. Le proprietà chiave del viewport includono: - **width**: Imposta la larghezza del viewport. `device-width` corrisponde alla larghezza effettiva dello schermo in pixel CSS. - **initial-scale**: Controlla il livello di zoom al primo caricamento della pagina. Un valore di `1` significa nessuno zoom. - **maximum-scale** e **user-scalable**: Controllano se gli utenti possono usare il pinch-to-zoom. Le linee guida sull'accessibilità raccomandano di consentire lo zoom. - **viewport-fit**: Sui dispositivi con notch o angoli arrotondati, `viewport-fit=cover` estende il contenuto nell'area sicura. Le media query CSS utilizzano le dimensioni del viewport per applicare stili diversi. Ad esempio, `@media (max-width: 768px)` si rivolge ai viewport più stretti di 768 pixel CSS, che è un breakpoint comune per la transizione tablet-mobile.

**"Viewport e risoluzione dello schermo sono la stessa cosa."** Non lo sono. Un telefono potrebbe avere una risoluzione dello schermo di 1170 x 2532 pixel fisici ma un viewport di 390 x 844 pixel CSS. Il device pixel ratio (DPR) colma il divario — su quel telefono, il DPR è 3, il che significa che ogni pixel CSS corrisponde a 9 pixel fisici. I designer lavorano in pixel CSS (il viewport), non in risoluzione fisica. **"Impostare `user-scalable=no` migliora l'esperienza."** Impedire lo zoom compromette l'accessibilità per gli utenti con problemi visivi. Gli standard web moderni e molti audit di accessibilità segnalano questo come un errore. Il visualizzatore FlipLink consente il pinch-to-zoom per impostazione predefinita mantenendo l'integrità del layout. **"Le dimensioni del viewport desktop sono costanti."** I viewport desktop variano ampiamente. Un utente con un monitor da 27 pollici e gli strumenti di sviluppo del browser aperti potrebbe avere un viewport stretto fino a 900 pixel — ben all'interno del territorio tablet. Le pubblicazioni responsive devono adattarsi alle dimensioni effettive del viewport, non a categorie di dispositivi presunte.

Il viewport è la finestra attraverso la quale i lettori vedono i vostri contenuti. Le pubblicazioni che rispondono alle dimensioni del viewport offrono un'esperienza coerente e professionale su ogni dispositivo — da uno smartphone da 4 pollici a un monitor desktop da 32 pollici — senza che il lettore noti mai l'adattamento in corso.