Viewport
Oramai siamo sempre più calati in un contesto di mobilità: gli smartphone e i tablet hanno cambiato tutte le nostre abitudini, sia in fatto di reperibilità e di “contatto” con il resto del mondo, sia in fatto di accessibilità ai servizi e ai siti internet. Quasi sicuramente anche tu sarai munito di uno smartphone e ti sarai certamente accorto di cosa accade ad un sito internet quando esso viene visualizzato attraverso un device mobile: solitamente esso viene adattato al dispositivo.
Facciamo un po’ di chiarezza: in un dispositivo mobile abbiamo una dimensione dello schermo riservata al browser molto ristretta1. Andiamo da 320px ad un massimo di 767px2: i numeri non sono casuali. Oltre agli smartphone esistono anche i tablet che, guarda caso, visti in posizione portrait (ossia in verticale) hanno una larghezza minima di 768px.
Queste dimensioni, tuttavia, ti fanno capire che se visualizzi il tuo sito in un browser mobile — come ad esempio Safari Mobile — molto probabilmente lo vedrai rimpicciolito. Poniamo il caso il tuo sito abbia una larghezza definita a 960px: dovendo stare all’interno di una dimensione minima di 320px il tuo sito dovrà essere scalato. Questo ridimensionamento viene fatto automaticamente da Safari Mobile grazie al suo viewport: altro non è se non la dimensione massima in pixel che il browser può avere (nel caso di Safari Mobile si aggira intorno a 980px). Ovviamente, dovendo far stare 980px su una dimensione di 320px, l’unica azione possibile è quella di ridurre lo zoom!
Questo processo, tuttavia, può — e anzi dovrebbe — essere gestito da te, in modo da far adattare al meglio il tuo sito. Qui entriamo nel mondo del Responsive Web Design (RWD), di cui non vedremo altro se non il fattore viewport. Nel RWD è necessario avere una certa pratica con CSS, per cui mi sono riservato l’argomento per futuri interventi. Tuttavia, è bene fin da subito che tu capisca come lavorare con viewport; il tutto può essere gestito in modo autonomo grazie ad un meta tag particolare: viewport, appunto.
Come sicuramente già saprai, i meta rappresentano delle informazioni aggiuntive per il browser o per qualunque altro tipo di software sappia interpretare queste informazioni. Con il meta riportato sopra, vai semplicemente a dire che il viewport del browser non sarà più quello di default (ossia 980px ristretti in 320px), ma che invece esso sarà pari alla grandezza dello schermo di quel device. Pertanto, il tuo sito, ora, non risulterà più scalato. Le possibili opzioni di viewport sono:
width; imposta la larghezza massima del viewport;height; imposta l’altezza massima del viewport;user-scalable; abilita o meno la possibilità di zoom del tuo sito; normalmente non andrebbe mai tolta la possibilità di zoom con le dita da parte dell’utente;initial-scale; imposta la scala iniziale di zoom; in un progetto RWD dovrebbe essere quasi sempre impostato a1.0.minimun-scale; imposta la scala minima di zoom, da0a1; seuser-scalableè impostato suno, questa proprietà potrebbe anche non essere inserita;maximun-scale; imposta la scala minima di zoom, da0a1; seuser-scalableè impostato suno, questa proprietà potrebbe anche non essere inserita;minimal-ui; applicata unicamente a Safari Mobile — stranamente solo iOS 7, iOS 8 non tiene più conto di questa direttiva — riduce al minimo la UI di Safari Mobile per dare più importanza ai contenuti.
In un progetto RWD, insomma, le impostazione che dovrebber essere date a viewport sono le seguenti:
A partire da questo punto potresti integrare il tuo CSS con delle media queries… ma questo è un argomento molto lungo e complesso da vedere adesso. Se sei curioso, però, prova a leggere questo articolo su Smashing Magazine, inerente al Responsive Web Design.