La maggior parte dei browser per dispositivi mobili oggi disponibili è in grado di rendere le pagine web concepite per il desktop senza alcun problema. Parliamo di layout ma anche di interazioni Javascript e funzionalità più avanzate. Per quanto riguarda il layout, tutto avviene attraverso un meccanismo di adattamento delle dimensioni. Una pagina come la home di HTML.it, basata su un container centrato e largo 996px, viene così visualizzata sullo schermo di un iPhone 3GS:
Il browser adatta automaticamente le dimensioni della sua area di visualizzazione (viewport) per accomodare al meglio il layout della pagina, che infatti viene reso nella sua configurazione originale, quella pensata per il desktop.
Questo processo, però, avviene su uno schermo che ha una risoluzione orizzontale di 320px! La pagina viene di fatto ridimensionata e ridotta in scala proporzionalmente. Il risultato è che per leggere un articolo di HTML.it su iPhone dobbiamo necessariamente zoomare sull'area che ci interessa con il doppio tap o con il pinch, gesti che sono certamente familiari a chiunque abbia utilizzato uno smartphone per navigare in rete.
Alla base di questo meccanismo c'è la differenza, cruciale, tra dimensione (risoluzione) dello schermo e dimensione della viewport. Su un iPhone, la dimensione orizzontale dello schermo è di 320px, mentre la viewport di Safari per iOS è pari, di default, a 980px.
Tale comportamento può andare bene e risultare accettabile fino a quando non si decida di adattare il sito ai dispositivi mobili. Nel momento in cui si compie questa scelta, è fondamentale controllare il meccanismo che regola il funzionamento della viewport. Possiamo farlo attraverso un semplice meta tag.
Come funziona il meta tag viewport
Quando realizziamo un sito che vogliamo si adatti ai browser dei dispositivi mobili, dobbiamo sempre inserire nella head della nostra pagina il meta tag viewport. Semplificando: con questo meta tag siamo noi a suggerire al browser il modo in cui dovrà gestire la viewport. Il controllo passa nelle nostre mani invece che essere affidato ai meccanismi di default del browser.
L'istruzione minima da inserire è questa:
<meta name="viewport" content="width=device-width">Stiamo dicendo al browser di impostare la larghezza (width) della viewport in base alla larghezza dello schermo del dispositivo (device-width).
Con questa istruzione, su un iPhone con orientamento portrait la larghezza della viewport sarà pari a 320px; 480px se lo smartphone è in orientamento landscape; sarà di 1024px su un iPad in modalità landscape, e così via. Saremo poi noi ad adattare il layout a queste dimensioni!
Ma cosa succede ad un sito con un layout non adattato per il mobile se si adopera quella riga di codice? Questo:
Dal momento che ora l'area di visualizzazione è di 320px e non 980px come di default su Safari per iOS, il layout non viene adattato, non avviene nessun ridimensionamento in scala, visualizzeremo solo una parte della pagina larga 320px, e per accedere al resto dovremo affidarci allo scrolling orizzontale.
Ricapitolando: se abbiamo un sito che non si adatta nel layout ai dispositivi mobili, non usiamo il meta tag viewport e lasciamo che sia il browser a compiere l'adattamento nei modi che abbiamo visto; se operiamo in un contesto responsive in cui il sito si adatta automaticamente nel layout ai dispositivi mobili, dobbiamo usare il meta tag nella configurazione vista qui sopra.
Altre impostazioni del meta tag viewport
Attraverso il meta tag viewport possiamo intervenire su altre impostazioni. Nel nostro progetto guida abbiamo così configurato l'istruzione:
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">Con la proprietà user-scalable possiamo decidere se consentire o meno all'utente di ridimensionare/zoomare la pagina. La home page de "Il viaggio" non può essere ridimensionata.
La proprietà initial-scale imposta il fattore di zoom iniziale, relativo al momento in cui la pagina viene caricata.
Con minimum-scale e maximum-scale possiamo invece stabilire di quanto l'utente può zoomare la pagina, fissando dei limiti (avendo usato user-scalable=no queste ultime istruzioni sono in realtà un di più, le abbiamo inserite nel codice solo a fini didattici).
Può bastare così. L'argomento è complesso, ma per i nostri obiettivi sappiamo tutto quello che c'è da sapere. Per una panoramica completa sul meta tag viewport le migliori risorse sono la documentazione di Apple e questo articolo apparso su Dev.Opera.