O que é
O CSS (o código de estilo que controla o aspeto de uma página) pode dimensionar elementos usando unidades fixas, como pixels (uma caixa definida com exatamente 800 pixels de largura, por exemplo), ou unidades relativas e flexíveis, como percentagens, que se ajustam automaticamente ao ecrã em que a página está a ser vista. Um "elemento de largura fixa" é qualquer parte de uma página — uma imagem, uma tabela, uma caixa contentora — dimensionada com um desses valores fixos em pixels em vez de um valor flexível.
Isto funciona bem enquanto o ecrã for mais largo do que esse valor fixo, mas assim que o ecrã real (um telemóvel, em particular) é mais estreito do que a largura fixa do elemento, o navegador não tem alternativa senão permitir que a página se desloque na horizontal para o acomodar, já que não pode encolher um elemento abaixo do tamanho explicitamente definido.
Por que importa
O deslocamento horizontal é um dos sinais mais evidentes e incómodos de um layout móvel avariado, porque obriga o visitante a deslocar-se em duas direções ao mesmo tempo só para ler normalmente — um padrão de navegação completamente diferente e mais frustrante do que o deslocamento vertical que qualquer visitante em telemóvel espera. Normalmente basta um único elemento demasiado grande em qualquer parte da página (uma imagem larga, uma tabela incorporada, uma caixa de largura fixa) para forçar este comportamento em toda a página, e não apenas à volta desse elemento.
Isto é muitas vezes um resquício de conteúdo pensado primeiro para computador — uma tabela copiada de uma folha de cálculo, ou uma imagem inserida nas suas dimensões originais e não comprimidas — e não uma falha fundamental no design geral do site.
Como corrigir
- Abre o teu site num telemóvel (ou numa janela de navegador estreita) e verifica se toda a página se desloca para os lados, ou localiza a secção específica onde isso começa.
- Procura o elemento específico que causa o transbordo — muitas vezes uma imagem larga, uma tabela incorporada ou uma caixa com uma largura em pixels explicitamente definida no estilo.
- Substitui as larguras fixas em pixels por unidades relativas, como percentagens, ou adiciona uma regra
max-width: 100%, para que o elemento nunca ultrapasse a largura real do ecrã. - Para tabelas largas em particular, considera envolvê-las num contentor com deslocamento próprio, limitado apenas a essa tabela, em vez de deixar a página inteira deslocar-se para os lados.
- Verifica novamente num telemóvel depois de cada alteração para confirmar que o deslocamento horizontal desapareceu.