Testare viewport landscape nel Designer di Webflow

Alla fine di questa lezione saprai simulare un viewport landscape — la forma bassa e larga che ottieni ruotando un telefono — direttamente nel Designer di Webflow, con nient’altro che un paio di elementi e una variabile. Niente pubblicazione, niente dev tools, niente giro da ripetere all’infinito.

Il dolore è reale: Webflow ti dà un handle per ridimensionare la larghezza del canvas, ma niente per la sua altezza. Quindi testare un vero breakpoint landscape normalmente significa pubblicare su staging, aprire i dev tools di Chrome, passare alla modalità responsive, indovinare le correzioni, tornare nel Designer, ripubblicare — e da capo. Ciò che vogliamo invece è costruire il nostro “viewport” regolabile proprio sul canvas.

È esattamente ciò che fa questo piccolo sistema — ed è tutto reversibile in tre passi quando hai finito.

Come funziona

L’idea è costruire un viewport finto: un container con un’altezza regolabile che ospita la tua pagina. Ogni elemento dimensionato in unità di altezza del viewport (vh) scalerà allora rispetto all’altezza di quel container invece che dello schermo reale — così ridurlo simula un viewport più basso.

Si realizza con una variabile number e un calc(). Crea una variabile number — chiamala vertical-resizer — e tienine il valore tra 0 e 1. Un valore di 1 è la normale altezza piena del canvas; 0.7 è un viewport alto il 70%; 0.5625 (cioè 9 ÷ 16) ti dà un 16:9 perfetto. Poi avvolgi il contenuto della pagina in un div (il viewport) e imposta la sua altezza a:

height: calc(var(--vertical-resizer) * 100vh);

Con la variabile a 0.7, risolve a 70vh. La power move è impostare l’overflow del viewport su auto, che clippa e rende scrollabile il viewport finto — così puoi continuare a ispezionare e modificare mentre vedi in anteprima uno schermo più basso.

L’ultimo pezzo è la coerenza: rimappa ogni proprietà basata su VH moltiplicandola per la stessa variabile. Una hero a 100vh diventa calc(var(--vertical-resizer) * 100vh); un’immagine a 60vh diventa calc(var(--vertical-resizer) * 60vh); un min(300px, 40vh) diventa min(300px, calc(var(--vertical-resizer) * 40vh)). Ora ogni elemento dipendente dall’altezza scala insieme, e la pagina si comporta davvero come se il viewport fosse più basso.

Due note oneste. In un progetto reale non lo fai a posteriori — scrivi la variabile fin dall’inizio e la tieni a 1, dove si comporta come se non ci fosse, poi la porti sotto 1 solo mentre testi. E questo esempio usa vh in modo pesante di proposito; la maggior parte dei progetti lo usa molto meno, quindi la tecnica si integra più fluidamente di quanto suggerisca il walkthrough. Un bell’effetto collaterale: siccome il contenuto che non scala con l’altezza andrà in overflow quando riduci il viewport, questo setup fa emergere anche i bug responsive — la correzione classica è sostituire un rigido height: 75vh con min-height: 75vh; height: auto.

Come si usa

1. Avvolgi la pagina — metti tutte le sezioni dentro un div page-wrapper (comunque un buon pattern standard).
2. Aggiungi il viewport — avvolgi page-wrapper in un div viewport.
3. Crea la variabile — una variabile number chiamata vertical-resizer, tenuta tra 0 e 1. Impostala a 0.7 temporaneamente per vedere l’effetto.
4. Imposta l’altezza del viewport — dai al div viewport height: calc(var(--vertical-resizer) * 100vh) e overflow: auto.
5. Rimappa i tuoi valori VH — passa in rassegna ogni proprietà che usa vh (altezza hero, altezze immagini, offset, padding verticale…) e moltiplica ognuna per la variabile via calc().
6. Centralo (opzionale) — aggiungi un viewport-wrapper (flex, verticale, centrato, 100vh), sposta il viewport dentro e aggiungi bordi sopra/sotto così i suoi margini sono visibili.
7. Testa qualsiasi ratio — cambia la variabile (es. 0.5625 per il 16:9) e, per i telefoni landscape, ridimensiona la larghezza del canvas sul breakpoint tablet (quello landscape di Webflow è datato).
8. Rimuovilo in 3 passi — riporta la variabile a 1, sposta page-wrapper fuori dal viewport wrapper ed elimina il wrapper. Fatto.

Pulito, reversibile e davvero pratico: un wrapper, una variabile e qualche ritocco in calc() ti danno un banco di prova landscape che vive nel tuo normale workflow Webflow.