I browser dei dispositivi mobili sono dotati di una finestra logica o virtuale (detta viewport) molto più ampia delle reali dimensioni dello schermo del dispositivo che consente di rappresentare in modo coerente anche le pagine web costruite senza tener conto dei dispositivi mobili.

La larghezza della viewport virtuale è diversa per ciascun browser:

  • Safari: 980px
  • Opera: 850px
  • WebKit: 800px
  • Internet Explorer Mobile: 874px

Quando la pagina viene caricata dal browser viene prima rappresentata nella viewport virtuale e poi, viene scalata per essere mostrata nel monitor del dispositivo mobile.

Il comportamento predefinito della viewport dei dispositivi mobili

Il comportamento predefinito della viewport dei dispositivi mobili

Dopo la visualizzazione l’utente può usare le funzioni d’ingrandimento e di spostamento per leggere la parte desiderata del documento.

L'utente può visualizzare aree specifiche della pagina usando le funzioni d'ingrandimento del dispositivo

L’utente può visualizzare aree specifiche della pagina usando le funzioni d’ingrandimento del dispositivo

Non è il modo più comodo di visualizzare un sito web ma consente di visualizzare la maggior parte dei siti web esistenti.

Il meta tag viewport

Quando si progetta un sito web destinato ai dispositivi mobili o almeno compatibile con essi è necessario potersi riferire alle reali misure del monitor in cui le pagine saranno visualizzate.

La viewport virtuale dei browser dei dispositivi mobili può essere controllata con un elemento meta introdotto da Apple per Safari Mobile.

<meta name="viewport" content="width=device-width, initial-scale=1">

L’elemento viewport configura il browser impostando la larghezza della viewport a quella del dispositivo (device-width) e il fattore d’ingrandimento a 1 (inizial-scale).

Il risultato è che la pagina viene visualizzata alle dimensioni reali, rispetto al monitor del dispositivo.

Controllare la viewport dei dispositivi mobili con l'elemento meta

Controllare la viewport dei dispositivi mobili con l’elemento meta

 

Se la pagina è più larga del monitor la parte eccedente sarà nascosta ma potrà essere visualizzata dall’utente con le funzioni di spostamento del dispositivo.

I valori ammessi nell’attributo content sono :

  • width, imposta la larghezza della viewport virtuale con la misura indicata, oppure con quella del dispositivo restituita da device-width
  • height, imposta l’altezza della viewport virtuale con la misura indicata, oppure con quella del dispositivo restituita da device-height
  • initial-scale, indica il fattore d’ingrandimento utilizzato per visualizzare il documento
  • minimum-scale, imposta il fattore di ingrandimento minimo con un valore numerico compreso tra 0 e 10
  • maximum-scale, imposta il fattore d’ingrandimento massimo con un valore numerico compreso tra 0 e 10
  • user-scalable, indica se l’utente può ridimensionare la vista (con il valore yes, che è il valore predefinito) oppure no

Non tutti i browser supportano le proprietà indicate che, in tal caso, saranno ignorate.

Se il documento è progettato proprio per i dispositivi mobili si può usare l’elemento viewport mostrato nel seguente esempio.

<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=no">

Sono usate le proprietà minimum-scale e maximum-scale al posto di initial-scale perché sono supportate da un maggior numero di browser.

Usare la proprietà user-scalable solo quando si è sicuri che la misura assegnata al testo garantisca la corretta visualizzazione da parte dell’utente che, proprio a causa della proprietà user-scalable, non sarà in grado di ingrandire il carattere.

Altre informazioni

Le dimensioni dello schermo dei principali dispositivi mobili è disponibile nel sito i-Skool, mentre altre informazioni sull’elemento viewport possono essere trovate nei seguenti documenti: