I mobile meta TAG

I mobile meta TAG

3050
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:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

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.

<meta name="MobileOptimized" content="240" />

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

<!-- SMARTPHONE -->
<meta name="MobileOptimized" content="176" />
<!-- POCKET PC-->
<meta name="MobileOptimized" content="240" />
<!-- POCKET PC AD ALTA RISOLUZIONE-->
<meta name="MobileOptimized" content="480" />

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.

<!-- POCKET PC AD ALTA RISOLUZIONE-->
<meta name="HandheldFriendly" content="true" />

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.

<meta name="viewport" content="width=240,user-scalable=yes,initial-scale=2.5, maximum-scale=5.0, minimum-scale=1.0" />

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:

<a href="tel:+39 800000000">Chiama ora</a>
<a href="tel:+39 310120300">Invia sms</a>

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.

<meta name="format-detection" content="telephone=no" />

Esempio di intestazione sito web mobile

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

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="it-IT"> 
<head> 
	<meta http-equiv="content-type" content="application/xhtml+xml" /> 
        <meta http-equiv="cache-control" content="max-age=300" /> 
        <meta name="viewport" content="initial-scale=1.0; user-scalable=no; minimum-scale=1.0; maximum-scale=1.0;" /> 
	<meta name="format-detection" content="telephone=no" />
        <meta name="MobileOptimized" content="240" />
        <meta name="HandheldFriendly" content="true" />
 
	<title>Titolo della pagina</title> 
</head>

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.

  • Davvero interessante come articolo. Mi ha fornito molti spunti per migliorare.

  • marcus

    ciao conosci qualche plugin wordpress che faccia tutto questo?

  • admin

    Ci sono diversi plugin per wordpress, tra questo wp-tap credo sia il più funzionale. Comunque sia questo articolo ti può essere utile per migliorare qualsiasi struttura gia esistente (plugin per wordpress ad esempio).

  • Paki Romita

    ottimo come sempre

  • Ottimo riepilogo stu studiando come fare una velina che apra automaticamente sull’iphone una piccola scheda che ti salvi nei preferiti… l’ho vista da qualche parte ma non ricordo dove :s

  • admin

    Ciao,
    probabilmente devi darti una lettura a questo articolo: http://www.marioconcina.it/blog/mobile-development/come-realizzare-sito-web-per-mobile-iphone.html alla voce “Sito web per iPhone” c’è, forse, quello che vorresti.

  • @admin grazie l’ho già letto ma è un altra cosa quella che voglio implementare.. praticamente arrivando sul sito si apre automaticamente l’icona con la possibilità di salvarla un link tra le app.. col tag apple-icon etc funge se tu manualmente clicchi su aggiungi ai preferiti…

  • admin

    A questo punto l’unica soluzione che mi salta in mente è quella di utilizzare jQuery. Fare una cosa tipo: al caricamento della pagina fai questa determinata azione. Non credo ci sia qualcosa di gia pronto in tal senso.

  • Già forse è possibile farlo con jquery mobile.. stay tuned!

  • admin

    Ma anche solo con jQuery, tanto il browser dell iPhone è safari per cui non ci sono problemi.

  • Che ne pensi di usare jquery tooltip, con un bel onLoad quando si carica la pagina?

  • admin

    basta anche fare una cosa del genere:
    jQuery(function(){
    //Qui dentro quello che devi implementare
    });

  • ho messo uno script che si chiama mobile-bookmark-bubble direi che fa quello che mi interessa :d

  • Simone

    Ciao Mario,
    leggo per la prima volta stasera il tuo blog ma sicuramente non sarà l’ultima :)
    Ti disturbo subito con una domanda però : perché se uso il docktype come da te indicato (in un sito fatto su tabelle) le immagini mi rimangono distanziate tra loro anche impostando padding, bordi ecc tutto a zero, sia nelle immagini nche nelle celle? Cosa che non succede usando transitional.

  • admin

    Perchè le tabelle sono obsolete, utilizza i div e vedrai che non avrai alcun problema.