blog

Tutti i moderni dispositivi mobili sono dotati di browser in grado di adattare alla propria risoluzione, la maggior parte delle pagine web online. Mediante le impostazioni di default del metatag viewport, che gestisce l’area di visualizzazione delle pagine web, ogni sito internet aperto da smartphone o tablet apparirà rimpiccolito e proporzionato.
Ad esempio, la larghezza dello schermo di un’iPhone con orientamento verticale sono di 320px, mentre la viewport standard di Safari per iOS è di 980px. Questo meccanismo, che necessita di gesti manuali come lo zoom o il trascinamento del dito sul display per interagire con le pagine web, è adatto a tutti quei siti web che non hanno previsto un layout fluido o un responsive web design.
Che dire dei siti vogliamo predisporre per tutti i dispositivi mobile e non solo?

Per suggerire ai dispositivi mobili di gestire un sito web responsive dobbiamo intervenire sul meccanismo che controlla il funzionamento della viewport, mediante questo semplice metatag:

<meta name="viewport" content="width=device-width">

Di per sé questo semplice metatag è sufficiente a dichiarare al browser che il sito ha la stessa larghezza del dispositivo che si sta utilizzando. Se la larghezza non fosse settata, di default questo parametro assume il valore della risoluzione che il sito mostra di default sui desktop pc. Esistono anche altre proprietà che possono essere aggiunte al metatag viewport per gestire ancora meglio la risoluzione del nostro sito web.

Attributi del metatag viewport

width: indica la larghezza del viewport espressa in pixel oppure in base alla larghezza del dispositivo: “device-width”

height: indica l’altezza del viewport espressa in pixels oppure in base all’altezza del dispositivo: “device-height”.

user-scalable: (no/yes) impedire o meno di zoomare manualmente.

initial-scale: (da 0 a 10.0) indica lo zoom iniziale della pagina.

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

Di seguito un’esempio in cui vengono utilizzati tutti i parametri del metatag viewport:

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