Cos'è
Il CSS (il codice di stile che controlla l'aspetto di una pagina) può dimensionare gli elementi usando unità fisse, come i pixel (una casella impostata esattamente a 800 pixel di larghezza, per esempio), oppure unità relative e flessibili come le percentuali, che si adattano automaticamente a qualsiasi schermo su cui viene visualizzata la pagina. Un "elemento a larghezza fissa" è qualsiasi parte di una pagina — un'immagine, una tabella, una casella contenitore — dimensionata con uno di quei valori fissi in pixel invece che uno flessibile.
Questo funziona bene finché lo schermo è più largo di quel valore fisso, ma nel momento in cui lo schermo reale (un telefono, in particolare) è più stretto della larghezza fissa dell'elemento, il browser non ha altra scelta che far scorrere la pagina lateralmente per adattarla, dato che non può ridurre un elemento sotto la sua dimensione esplicitamente impostata.
Perché è importante
Lo scorrimento orizzontale è uno dei segni più stridenti e inconfondibili di un layout mobile rotto, dato che costringe un visitatore a scorrere in due direzioni contemporaneamente solo per leggere normalmente — un pattern di navigazione completamente diverso e più frustrante rispetto allo scorrimento su e giù che ogni visitatore mobile si aspetta ovunque. Di solito basta un solo elemento sovradimensionato da qualche parte nella pagina (un'immagine larga, una tabella incorporata, una casella a larghezza fissa) per forzare questo comportamento sull'intera pagina, non solo intorno a quell'elemento.
Questo è spesso un residuo di contenuto progettato prima per l'uso desktop — una tabella copiata da un foglio di calcolo, o un'immagine inserita alle sue dimensioni originali in pixel non compresse — piuttosto che un difetto fondamentale nel design generale del sito.
Come risolverlo
- Apri il tuo sito su un telefono (o una finestra del browser stretta) e controlla se l'intera pagina scorre lateralmente, o trova la sezione specifica dove inizia.
- Cerca l'elemento specifico che causa l'overflow — spesso un'immagine larga, una tabella incorporata, o una casella con una larghezza in pixel esplicitamente impostata nel suo stile.
- Sostituisci le larghezze fisse in pixel con unità relative come le percentuali, o aggiungi una regola
max-width: 100%così l'elemento non può mai superare la larghezza reale dello schermo. - Per le tabelle larghe in particolare, valuta di avvolgerle in un contenitore scorrevole limitato a quella singola tabella, invece di lasciare che l'intera pagina scorra lateralmente.
- Ricontrolla su un telefono dopo ogni modifica per confermare che lo scorrimento orizzontale sia sparito.