Il tag meta fornisce informazioni o metadati circa il documento HTML corrente. I metadata non intervengono nella composizione della pagina mostrata a schermo, ma sono elaborati dal browser. Un esempio tipico dell'uso del tag meta consiste nell'utilizzare le informazioni del tag meta per specificare descrizione, parole chiave, autori ed ultime modifiche del documento. Il tag va' inserito nel blocco di head.

iPhone, ed in particolare Safari, utilizza il meta tag per la gestione della vista. Per fare questo implementa un meta tag denominato viewport. Senza l'accesso ad esso, la pagina non viene mostrata correttamente, rendendola una versione "miniaturizzata" della versione da browser classico.

la sua versione piu' semplice e' una chiamata di questo tipo:

<meta name="viewport" content="width=320, user-scalable=yes" />



L'opzione user-scalable viene utilizzata per abilitare/disabilitare la possibilita' per l'utente di effettuare uno zoom in/out all'interno della pagina attraverso il doppio tocco. L'attributo width, invece, ci assicura che il contenuto non sara' ridotto in maniera casuale rispettando la larghezza impostata. Personalmente, ritengo la soluzione non molto funzionale.
Il problema risiede nel fatto che la risoluzione del viewport, viene impostata su 320px. Quest'ultima e' la risoluzione nativa dell'iPhone in modalita' portrait. Sicuramente, se la pagina viene consultata per un periodo di tempo maggiore ai 60secondi, l'utente trovera' piu' comodo spostarsi in landscape mode e continuare con una risoluzione piu' confortevole. In quest'ultima evenienza, la risoluzione varia ed il viewport renderizza la nuova versione scalandone i contenuti ed ingrandendo praticamente tutto, fonts compresi.
Questo comportamento, non e' sempre desiderabile, specialmente con i fonts. Ovviamente tutto cio' puo' essere rimediato con un CSS ad-hoc, come descritto precedentemente. Ad ogni modo, senza scomodare CSS, e' possibile modificare il comportamento di default, impostando il viewport alla risoluzione di landscape e restringendo le possibilità di scaling del contenuto:

<meta name="viewport" content="width=480; initial-scale=0.6666; maximum-scale=0.6666; minimum-scale=0.6666" />