Fino a poche ore fa ignoravo l'esistenza di altre unità di viewport oltre a vh/vw, e come me ne sono accorto? Cercando soluzioni per problemi di responsività mi sono accorto di avere implementato una modale concepita per occupare il 100% dell'altezza della pagina: '100vh' funzionava molto bene... sul desktop.
Il problema si palesa davvero durante i test su un dispositivo mobile.
Qui di seguto la descrizione del problema e come l'ho risolto.
In questo articolo cercherò di parlare un po' delle nuove unità CSS viewport: svh, svh, dvh. Ma prima serve introdurre alcuni concetti.
Che cos'è un Viewport?
In poche parole, il viewport è l'area visibile di una pagina web su un dispositivo. Ovviamente, le dimensioni del viewport variano a causa del dispositivo o del browser e possono anche essere modificate dall'utente se questo ridimensiona la finestra del browser.
VH - Viewport Height
Il "VH" è stato introdotto nel modulo 3 dei CSS ed è un'unità relativa dei CSS; consente di ridimensionare gli elementi della pagina in base alle dimensioni dello schermo, creando un layout reattivo. Il 'vh' rappresenta una percentuale dell'altezza del viewport.
1vh = 1% dell'altezza del viewport.
.foo {
height: 50vh; /* O elemento terá 50% da altura do viewport */
}
Problemi di VH
Bene, 'vh' ha portato molti miglioramenti, ma per i desktop; sui dispositivi mobili abbiamo ancora problemi perché alcuni browser hanno la barra di navigazione che occupa spazio sullo schermo. Di solito questa barra si trova sopra il contenuto della pagina, e può espandersi o ritirarsi dinamicamente in base alla direzione in cui l'utente "scorre" la pagina, di conseguenza 'vh' può avere un comportamento inaspettato su alcuni dispositivi.
A causa di questi problemi la comunità ha discusso e proposto alcune soluzioni:
SVH - Small Viewport Height
L'SVH è definito considerando la dimensione del viewport quando la barra di navigazione (o altri elementi del browser) è espansa, cioè quando il browser occupa tutto lo spazio possibile il contenuto della pagina sarà il più piccolo possibile.
Come nell'esempio seguente, "100svh" occuperà lo spazio dello schermo quando la barra di navigazione è espansa, senza che il contenuto rimanga sotto la barra.
.container {
height: 100svh; /* L'elemento avrà l'altezza del viewport, considerando l'interfaccia utente espansa. */
}
- *Quando conviene usarlo Quando si vuole garantire che il contenuto non sia coperto dall'UI del browser.
- *Quando è meglio evitare Se l'UI del browser è chiusa, perché potrebbe esserci dello spazio bianco in più.
LVH - Large Viewport Height
Possiamo dire che 'lvh' è l'opposto di 'svh'. E' definito considerando la dimensione del viewport quando la barra di navigazione o altri elementi del browser sono minimizzati, quindi quando il browser occupa il minor spazio possibile il contenuto della pagina sarà massimizzato, in pratica 'lvh' agisce in modo simile a 'vh'.
.container {
height: 100lvh; /* L'elemento avrà l'altezza del viewport, considerando l'interfaccia utente collassata. */
}
- *Quando conviene usarlo Per massimizzare lo spazio del contenuto quando l'interfaccia utente del browser è chiusa.
- *Quando è meglio evitare Se l'UI del browser è espansa, perché il contenuto può essere coperto.
DVH - Dinamyc Viewport Height
Dinamyc Viewport (come suggerisce il nome) è dinamico, adatta/regola automaticamente le dimensioni del contenuto in base all'interfaccia utente del browser sia che questo risulti espanso o al contrario compresso. Nonostante questo possa sembrare perfetto bisogna essere consapevoli che l'uso di 'dvh' può causare il ridimensionamento del contenuto quando l'utente scorre, condizione che può essere causa di fastidio e una cattiva UX, oltre a essere costoso in termini di prestazioni.
.container {
height: 100dvh; /* L'altezza dell'elemento si adatta dinamicamente all'UI del browser. */
}
- *Quando conviene usarlo Quando si desidera una variazione dinamica dell'altezza al variare dell'interfaccia utente del browser.
- *Quando è meglio evitare Se il ridimensionamento dinamico potrebbe distrarre o influire negativamente sull'esperienza dell'utente.
Top comments (0)