Attraverso il metatag viewport ed altri piccoli suggerimenti, andiamo a gettare le basi indispensabili per iniziare la realizzazione di un sito mobile, visibile sugli smartphone più comuni che utilizzano Android, iPhone, Windows Mobile ecc…
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
Questo sarà il codice per il metatag viewport che andremo ad implementare nel nostro sito mobile. Prima però facciamo un passo indietro e vediamo come impostare correttamente ciò che viene prima della struttura di una pagina, in modo da rendere il nostro sito più possibile compatibile e correttamente visualizzabile sugli smartphone.
Premetto che è inevitabilmente necessario avere alcune basi di progettazione di siti web per poter comprendere ciò che stiamo per vedere!
Bene, ora che abbiamo fatto queste premesse, siamo pronti per iniziare a mettere mano al nostro codice. Nel nostro file .html andiamo a scrivere:
< !doctype html>
<html>
<head>
<title>Ciao Webdesigner!</title>
</head>
<body>
<p>Ciao Webdesigner, benvenuto!</p>
</body>
</html>Dunque, come immediatamente il vostro occhio vispo vi farà notare, abbiamo utilizzato la dichiarazione doctype di HTML5. A differenza di quanto accadeva fino ad html 4.01 o xhtml 1.1, ora finalmente possiamo sbarazzarci di tutte le dicerie che trovavamo in questo tag! Era ora no?
Il resto del codice direi che è più che comprensibile per degli appassionati come voi no? Se non lo fosse fate pure tutte le domande del caso 😉
Bene, ora provate a visualizzare la vostra pagina con il vostro bellissimo smartphone e…? Che succede? Non leggo niente!
Ebbene sì, per chi ha la fortuna (o sfortuna dipende dai punti di vista :P) di vedere in questo momento il suo sito con lo smartphone noterà che le scritte sono illeggibili. La questione è molto semplice. I browser degli smartphone si aspettano al 90% di trovare siti non ottimizzati per loro, di conseguenza stimano che abbiano una larghezza media di 980px e cercano di mostrare sullo schermo tutta l’area inclusa in queste dimensioni. Ma non preoccupiamoci, il metatag viewport serve proprio a risolvere questo problema!
Aggiungiamo quindi una linea al nostro codice precedente come di seguito:
< !doctype html>
<html>
<head>
<title>Ciao Webdesigner!</title>
<meta name="viewport" content="width=device-width"/>
</head>
<body>
<p>Ciao Webdesigner, benvenuto!</p>
</body>
</html>Et voilà! Finalmente vediamo le nostre scritte in modo comprensibile! Infatti, dichiarando l’attributo content come “width=device-width” stiamo dicendo al browser che il sito che stiamo visualizzando non sarà largo 980px e che dovrà essere visualizzato in riferimento alla larghezza del nostro dispositivo (nel caso dell’iPhone 320px). Quindi, così facendo, lui ci mostrerà lo spazio coincidente alla risoluzione del nostro dispositivo!
Vi ricordo che questo tag è supportato da iPhone, Android, webOS, Internet Explorer Mobile, Opera Mini eOpera Mobile.
Il codice completo che però abbiamo visto all’inizio era più completo! Andiamo allora rapidamente a vedere i principali attributi del tag viewport così da non sbagliare un colpo!
I principali attributi del metatag viewport
| Proprietà | Descrizione |
| width | Larghezza del viewport espressa in pixels oppure in termini di “device-width” (larghezza del dispositivo). Se la larghezza non fosse settata, di default questo parametro assume il valore della risoluzione che il sito mostra di default sui desktop pc. |
| height | L’altezza del viewport espressa in pixels oppure in termini di “device-height”. Generalmente questa proprietà non viene impostata. |
| initial-scale | (da 0 a 10.0) Multipli che settano lo zoom della pagina. Il consiglio migliore è di settare il valore a 1.0 in modo che venga attribuita la larghezza totale del nostro dispositivo in scala 1 a 1 (quella che nell’esempio di prima era di 320px per l’iPhone). Usare multipli di 1 significa mostrare una porzione di schermo più ingrandita (effetto zoom-in), valori minori ridotta (effetto zoom-out), sempre a partire dal valore di default corrispondente allo scale di 1.0. |
| minimum-scale | (da 0 a 10.0) Indica il limite minimo di zoom-out che l’utente può effettuare |
| maximum-scale | (da 0 a 10.0) Indica il limite minimo di zoom-in che l’utente può effettuare |
| user-scalable | (yes/no) Permette di bloccare o lasciare libera la possibilità di zoomare. |
Bene, il tag viewport è stato spulciato, ma se questo non fosse supportato dallo smartphone su cui dovremo visualizzarlo?
Occorre utilizzare altri sistemi quali le media queries oppure il riconoscimento dello User Agent del browser.
Per avere ulteriori nozioni su come iniziare a realizzare siti mobile vi invito a leggere l’articolo sulle media queries!
Articolo liberamente tradotto da: http://davidbcalhoun.com/2010/viewport-metatag
