I mobile meta TAG

I mobile meta TAG

7628
15
CONDIVIDI

Quando si ha a che fare con un qualsiasi progetto web spesso si perde l’importanza dei META TAG e della loro utilità. Soprattutto se si ha la cattiva abitudine di utilizzare “editor” visuali che con un click impaginano il sito senza minimamente preoccuparci di cosa viene prima del “body”. Per l’impaginazione mobile qualcosa (o forse più) cambia, i browser per cellulari hanno bisogno di interpretare che il vostro sia effettivamente un sito web mobile e lo fanno in base al rendering del codice di marcatura attraverso proprio i META TAG ed il DOCTYPE che fanno assumere all’intera pagina dei connotati ben precisi: “Questo è un sito mobile”. Non a caso se provate a visualizzare qualsiasi sito web “normale” su un cellulare, beh, lo vedrete non male…ma peggio! Questo dipende dal fatto che il DOCTYPE del sito web tradizionale è differente rispetto quello di un sito web formato mobile, stessa cosa dicasi per i META TAG che adesso elencherò:

Doctype mobile

Tutte le pagine XHTML MP devono obbligatoriamente avere una dichiarazione DOCTYPE. Essa indica il nome della DTD e la sua URL. Cosa contiene un doctype? Informazioni relative alla sintassi del markup e indica quali elementi e regole possono essere utilizzati all’interno del documento in sede di validazione.
Per i siti web mobile lo standard è il seguente:


I tool di convalida DEVONO essere utilizzati per controllare se il documento è conforme agli standard internazionali. Tra i TOOL UFFICIALI di validazione vi è quello del w3c mobile ma di questo probabilmente scriverò un articolo a parte.

META MobileOptimized

Credevate che col mobile vi sareste eternamente sbarazzati di INTERNET EXPLORER e di tutti i suoi derivanti bug di inusabilità? Microsoft ha infatti inventato un META TAG per il mobile, il “MobileOptimized” che serve a controllare la larghezza di layout per browser di tipo Internet Explorer Mobile (Pocket IE su Windows Mobile 5). Il contenuto del meta-tag è un numero intero (larghezza in pixel). Quindi con la presenza di MobileOptimized verrà forzata la larghezza di visualizzazione di un sito web mobile con browser IEMobile seguendo la larghezza specificata.

Alcuni esempi concreti di misure standard applicabili su dispositivi Windows Mobile sono i seguenti:







META HandheldFriendly

Tradotto in parole spicciole serve ad indicare al browser che sta interpretando la pagina “si, questo è un sito web ottimizzato per mobile!”. Generalmente è un tag facoltativo che viene interpretato soprattutto dai palmari sui quali senza questo META TAG immagini, tabelle e codice javascript “potrebbe” essere compromesso.



META ViewPort

Eccoci dunque al sodo, quello che considero il meta-tag più importante. Spesso ogni browser web adotta delle regole di interpretazione della pagina interne ad esso, allargando e restringendo la pagina a seconda della larghezza dei loro display.

ViewPort controlla intelligentemente le dimensioni della finestra del viewport del browser donando al vostro sito una visualizzazione più compatta e consona alla vostra logica di impaginazione. La presenza di questo meta-tag indica che il documento è ottimizzato per i dispositivi mobili.


Ma cerchiamo di capire meglio il significato di tutti questi valori che possono essere fatti passare tramite ViewPort:

Meta-tag Esempio valore Descrizione
width width=320
width=device-width
La larghezza “logica” della finestra, in pixel. 320 in questo caso è il valore ideale per un dispositivo Apple iPhone/iPod ma non necessariamente deve essere questo.
user-scalable user-scalable=no L’altezza “logica” della finestra, in pixel. Valore che solitamente viene tralasciato in quanto spesso l’altezza è variabile.
initial-scale initial-scale=2.0 Imposta il ridimensionamento iniziale per la visualizzazione di una pagina web. Il valore di default è 2.0.
maximum-scale maximum-scale=2.5 Imposta il limite massimo per il ridimensionamento/zoom della pagina web. Il range dei valori va da 0,25 a 10,0. Il valore di questa direttiva costituisce un fattore di scala o moltiplicatore applicato ai contenuti viewport.
minimum-scale minimum-scale=0.5 Esatto opposto del maximum-scale, indica il limite minimo per il ridimensionamento/zoom-out della pagina web.

META Format-detection

Il vantaggio pratico dei siti web mobile è quello di poter attribuire ad un link la possibilità di far partire una chiamata o un sms se quello che si sta cliccando è un numero di telefono:

Chiama ora
Invia sms

Un problema molto frequente su iPhone è quello di rilevare in automatico come numero telefonico qualsiasi intero si inserisce (es: P.Iva: 09092021 l’iPhone lo interpreta come un numero telefonico).
Il meta-tag format-detection abilita o disabilita la rilevazione automatica dei numeri interi presenti in una pagina web su iPhone. E’ buona norma impostare questo meta-tag a “NO” e applicare le regole HTML spiegate qualche riga più su.


Esempio di intestazione sito web mobile

La nostra intestatione (meta-tag parlando) sarà simile alla seguente:

 
 
 
	 
         
         
	
        
        
 
	Titolo della pagina 
 

I meta tag utilizzabili in una pagina web standard sono un’infinità ma per ottenere un buon sito web mobile le basi fondamentali di dichiarazione all’interno dell’intestazione di una pagina sono descritte in questo articolo.