In CSS3 si può definire il meta tag viewport all’interno dei tag HEAD dell’html. Si tratta di una dichiarazione fondamentale e che oramai è presente in qualsiasi sito moderno, poiché da esso dipende sostanzialmente la possibilità di realizzare un tema responsive, e quindi adatto anche a tablet e smartphone. Un esempio classico è il seguente:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
</head>Con questa dichiarazione infatti si determina che la misura del browser non è fissa, ma con content=”width-device-width” si misura in tempo reale la larghezza del browser. Nel caso di uno smartphone sarà sostanzialmente immutabile ma nel caso dell’ambiente desktop potremmo restringere la finestra del nostro browser e vedere un riposizionamento dei contenuti in base alla larghezza che abbiamo in quel preciso momento.
Tuttavia è meno noto che si possa utilizzare il viewport come unità di misura. Infatti in genere si utilizza per definire una box o un area (generalmente un tag DIV) i valori in percentuale come misura relativa, oppure in pixel nel caso di misura assoluta.
width: 100%;
width: 300px;E’ però possibile definire una terza e quarta, sempre relativo ad una misurazione relativa, con il viewport. Ovvero dichiarare la distanza in larghezza e lunghezza rispetto alla parte che viene mostrata su schermo.
width: 100vw;
height: 90vh;Quindi nel caso sopra se lo schermo è di 1000 pixel, 100vw corrisponderanno a 100 pixel. In questo caso il funzionamento non è sostanzialmente differente dal sistema a percentuale, solo che la percentuale è riferita a qualsiasi cosa e può anche uscire dall’area di visualizzazione, mentre con viewport non potrà eccedere tale confine.
Esistono, ma sostanzialmente solo per la cronaca, altri due unità di misura che sono vmin e vmax. Il secondo è sostanzialmente nullo poiché non è supportato da Internet Explorer. Queste due unità indicano rispettivamente la percentuale della parte più piccola e più grande del viewport. Come si può intuire sono due unità per situazioni che richiedono funzioni condizionali del CSS3.