Meta name viewport
I browser dei dispositivi mobile (smartphone, tablet) adattano automaticamente le dimensioni dell'area di visualizzazione ( viewport ) prima di visualizzare una pagina web. Questo può causare diversi problemi di visualizzazione.
Esempio. Il rendering automatico ridimensiona e riduce la pagina web a una scala proporzionale al display del dispositivo (es. 320px negli smarphone più piccoli). Spesso la pagina viene visualizzata a caratteri molto piccoli, divenendo illeggibile, costringendo l'utente a zoomare.
Quando si realizza un sito web responsive occorre considerare questo aspetto.
Una soluzione al problema è dire al browser di non adattare l'area di visualizzazione.
Inserisco nella sezione <head> della pagina web il seguente meta tag
<meta name="viewport" content="width=device-width">
In questo modo sto dicendo al browser di usare come area di visualizzazioni (viewport) le dimensioni del display del dispositivo mobile ( width=device-width ), senza adattarlo al contenuto da visualizzare.
Questo è già un passo in avanti ma non è sufficiente.
Per impostare automaticamente uno zoom a scala 1.0 rispetto alla pagina da visualizzare aggiungo anche l'attributo initial-scale
<meta name="viewport" content="width=device-width", initial-scale=1.0>
In questo modo la pagina web viene visualizzata in una scala 1:1 sul display del dispositivo mobile.
Eventualmente, potrei anche definire un intervallo di zoom con gli attributi minimum-scale e maximum-scale
<meta name="viewport" content="width=device-width", initial-scale=1.0, minimum-scale=0.9, maximum-scale=1.1>
Potrei anche disattivare del tutto la possibilità di zoom da parte dell'utente, inserendo l'attributo user-scalable=no
<meta name="viewport" content="width=device-width", user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0>
Gran parte dei problemi di visualizzazione sul dispositivo mobile sono risolti.
Gli eventuali problemi restanti sono risolvibili agendo sul css del sito.
E così via.
