Il mobile web – ovvero la programmazione e ottimizzazione dei siti web per essere visualizzati da telefonini e smartphones – può a volte sembrare un argomento difficile e ostico. In questa serie di tutorial vogliamo invece affrontare un tema alla volta, quasi in "pillole", per cercare di analizzare in profondità ma in maniera comprensibile ed efficace tutti i temi che un developer dovrebbe conoscere per affrontare in maniera completa il mondo del mobile.

Cominciamo dunque dall'argomento viewport. Si tratta di un meta tag che viene inserito nell'<head> delle pagine ottimizzate per smartphones per indicare al browser del telefono che la sta mostrando il livello di zoom da utilizzare nella visualizzazione.

Vediamo un esempio pratico. Nella seguente immagine vediamo come una pagina senza meta tag viewport viene visualizzata da un iPhone:

I caratteri sono molto piccoli e quasi illeggibili. Il motivo è che il telefono, per rendere il più possibile del sito visibile, setta una larghezza dello schermo di 800 o 900 pixel (a seconda del browser), rendendo dunque pressochè inutilizzabile qualunque sito (l'idea è che si farà poi uno zoom nella parte che ci interessa)

Se invece noi vogliamo rendere il nostro sito già ben visibile dagli smartphones ci basterà aggiungere questa riga nell'<head> della pagina:

<meta name="viewport" content="width=device-width , user-scalable=no">

e questo è quello che vedremo:

Che cosa abbiamo fatto? Attraverso il meta tag viewport abbiamo detto al browser di usare come larghezza dello schermo quella del telefono (nel caso dell'iPhone 320px), senza fare dunque nessuno zoom-out. Ecco perchè i nostri caratteri sono molto più leggibili e grandi. Abbiamo poi anche detto (attraverso il comando user-scalable=no) di non consentire all'utente di cambiare il livello di zoom – questo per evitare che inavvertitamente il nostro visitatore faccia uno zoom-in o zoom-out scombinando il nostro sito ottimizzato.

La lista completa dei valori

Ecco di seguito tutti i valori che possono essere usati nell'attributo "content" di questo meta tag:

  • width: la larghezza del viewport. Si può specificare un valore in pixel (es: "320px") oppure "device-width".Quest'ultima maniera è quella consigliata dal momento che così facendo prende la larghezza del device specifico, iPhone, iPad, Android o qualsiasi cosa questo sia.
  • height: stesso discorso della width ma per l'altezza. Oltre ai pixel si può usare "device-height". In genere questo valore non viene indicato.
  • initial-scale: in una scala da 0 a 10, indica il livello di zoom iniziale (con 1 = nessuno zoom). Il consiglio è lasciare questo valore vuoto o settarlo a "1".
  • user-scalable: yes/no. Se no (come abbiamo visto prima) l'utente non può cambiare il livello di zoom della pagina.
  • minimum-scale: da 0 a 10, se user-scalable è "yes" indica il livello minimo di zoom che l'utente può impostare.
  • maximum-scale: da 0 a 10, se user-scalable è "yes" indica il livello massimo di zoom che l'utente può impostare.

In action

Molto semplicemente, ecco una pagina con il meta tag viewport settato:

<!DOCTYPE HTML><br />    <html><br />       <head><br />           <title>Esempio utilizzo meta tag viewport</title><br />           <meta name="viewport" content="width=device-width , user-scalable=no"><br />       </head><br />    <br />       <body style="font-size: 5px;"><br />    <br />           In questa pagina è presente il meta tag viewport<br />    <br />       </body><br />    </html>

The following two tabs change content below.
Silvio Porcellana
Silvio Porcellana è il fondatore di mob.is.it, il tool che centinaia di agenzie e professionisti di tutto il mondo utilizzano per creare con semplicità siti mobili e applicazioni native per i loro clienti. Tiene anche un podcast dove racconta ogni venerdì le sue avventure imprenditoriali, senza veli o segreti: Opus Digitalis