Cos'è
Gli schermi dei telefoni sono fisicamente stretti, ma per molto tempo la maggior parte dei siti web è stata costruita assumendo uno schermo desktop molto più largo. Per mantenere utilizzabili questi vecchi siti, i browser mobili per impostazione predefinita fingono silenziosamente che lo schermo sia largo circa 980 pixel, più o meno quanto un desktop, per poi rimpicciolire il tutto per farlo stare: è per questo che una pagina non preparata può apparire minuscola e rimpicciolita su un telefono finché qualcuno non fa lo zoom con le dita.
Il meta tag viewport è una singola riga di codice, <meta name="viewport" content="width=device-width, initial-scale=1">, che sovrascrive quel vecchio comportamento predefinito e dice al browser "in realtà dimensiona questa pagina in base alla larghezza reale dello schermo, con zoom normale". È ciò che permette a un design responsive (che si adatta a schermi di dimensioni diverse) di funzionare davvero su un telefono.
Perché è importante
Senza questo tag, una pagina progettata con cura per ridisporsi e ridimensionarsi su schermi mobili non ha mai la possibilità di farlo: il telefono la mostra come un layout desktop rimpicciolito, indipendentemente da come è stato costruito il design sottostante. È un'impostazione puramente tecnica e binaria: o il tag è presente e corretto, oppure ogni visitatore da telefono vede il layout sbagliato, per quanto bene sia stato progettato il resto del sito.
Poiché più della metà del traffico web della maggior parte dei siti proviene da telefoni, questa singola riga mancante può influenzare la maggioranza dei visitatori ancora prima che inizino a leggere.
Come risolverlo
- Visualizza il codice sorgente HTML della tua pagina e controlla nella sezione
<head>la presenza di un tag che inizia con<meta name="viewport". - Se manca, aggiungi
<meta name="viewport" content="width=device-width, initial-scale=1">proprio dentro la sezione<head>. - Se usi un website builder (Squarespace, Wix, Webflow, WordPress), questo viene impostato automaticamente dalla piattaforma: un tag mancante qui indica quasi sempre un blocco di codice personalizzato che lo sovrascrive, quindi controlla eventuali codici personalizzati nell'
<head>che hai aggiunto. - Evita di aggiungere
maximum-scale=1ouser-scalable=noallo stesso tag: queste aggiunte impediscono ai visitatori di fare lo zoom con le dita, creando un problema di accessibilità a parte. - Carica poi la pagina su un telefono reale (o nella modalità di anteprima mobile del tuo browser) per confermare che ora riempia lo schermo con dimensioni leggibili invece di apparire rimpicciolita.