O e-mail se desmancha no celular: o que verificar e como consertar
Sete sintomas, suas causas e a ordem para corrigir
Mailvex · 4 setembro 2026 · 5 min de leitura
No computador o e-mail fica certo; no celular o texto encolhe, as colunas não empilham e o botão sai da borda. São sete causas, e quase todas remetem à mesma coisa: a montagem foi feita para tela larga e a estreita a recebe sem mudanças. A seguir, os sintomas, as causas e a ordem para corrigi-los.
Primeiro, descubra o que exatamente quebrou
Antes de consertar qualquer coisa, descubra o que exatamente quebrou. Abrir o e-mail no celular e olhar o conjunto não basta: é preciso saber qual elemento se comporta mal.
Um truque prático: abra o e-mail lado a lado no celular e no computador. A diferença aparece na hora, e você saberá se é questão de tamanho, de montagem ou de espaçamento.
Importa saber que parte dos clientes de e-mail móveis não suporta media queries de jeito nenhum. O código que muda a montagem em tela estreita simplesmente não roda ali. Então a montagem precisa funcionar antes de qualquer adaptação, com a media query apenas melhorando.
Sete sintomas e suas causas
Sete sintomas cobrem quase todos os casos. Encontre o seu na primeira coluna.
| Sintoma | Causa | O que fazer |
|---|---|---|
| Texto menor que o esperado | tamanho fixo abaixo de 16 pixels | coloque 16 ou mais; um iPhone amplia o que for menor que 13 e quebra o layout |
| E-mail mais largo que a tela | largura fixa em pixels | 600 no desktop, 100 por cento em tela estreita |
| As colunas não empilharam | montagem com blocos sem alternativa | tabelas mais uma media query, alguns clientes as ignoram |
| O botão não é tocável | altura abaixo de 44 pixels | 44 no mínimo, 48 melhor, espaçamentos no próprio link |
| Imagens esticadas | sem limite de largura | largura máxima 100 por cento, altura automática |
| Os espaçamentos se desmancharam | espaçamentos em blocos e não em células | mova para as células da tabela |
| E-mail cortado | peso acima do limite | fique abaixo de 100 KB, a plataforma adiciona o código dela por cima |
As duas primeiras linhas acontecem mais que todas as outras juntas. Sobretudo a primeira: quase ninguém escreve sobre ela e as consequências são visíveis.
A armadilha da fonte no iPhone
A armadilha da fonte merece a própria seção porque não é óbvia.
Um iPhone amplia à força qualquer fonte menor que 13 pixels. Ele faz isso por legibilidade e não dá para desativar.
O problema é que o contêiner não muda. O texto cresceu enquanto o espaço para ele continuou igual, então deixa de caber. As linhas quebram onde não devem, o bloco cresce para baixo, os elementos vizinhos se deslocam.
Daí a regra: texto principal a partir de 16 pixels, texto pequeno como legendas de imagem não menor que 13. Tudo abaixo disso gera montagem imprevisível em parte dos dispositivos.
A ordem para corrigir
Corrija os sintomas em uma ordem específica: algumas correções resolvem vários problemas de uma vez.
- primeiro os tamanhos de fonte: 16 ou mais para o texto, não menos que 13 para o pequeno
- depois a largura: 600 pixels em tela larga, 100 por cento em estreita
- então a montagem: tabelas em vez de blocos, uma única coluna por padrão
- em seguida os botões: altura a partir de 44, melhor 48, espaçamentos no link
- por último os espaçamentos: mova dos blocos para as células de tabela
A ordem não é arbitrária. Os tamanhos de fonte afetam a altura dos blocos, a largura afeta as quebras de linha, a montagem afeta tudo. Se começar pelos espaçamentos, terá que refazê-los após cada mudança seguinte.
Como testar em vez de adivinhar
Verificar o e-mail em um emulador de navegador não basta. Ele mostra como um site ficaria naquela largura de janela, não como um cliente de e-mail renderiza o e-mail em um dispositivo real.
O teste mínimo é enviar o e-mail para si mesmo e abrir no celular. Não na pré-visualização da sua plataforma de envio, e sim no aplicativo de e-mail real onde o destinatário vai vê-lo.
- abra no celular e role até o fim
- toque na borda de cada botão, não no centro
- veja no modo escuro: o texto se fundiu com o fundo?
- desative o carregamento de imagens e confirme que o sentido se mantém
- verifique se o texto cabe nos blocos sem quebrar palavras ao meio
O segundo item é o que mais importa. Tocar na borda revela se o botão inteiro é clicável ou só o rótulo, e essa é a causa mais frequente de cliques perdidos no celular.
Como um construtor resolve isso
A maioria dos sintomas da tabela surge porque a montagem é feita para tela larga e o celular a recebe sem mudanças. A ordem certa é a inversa: primeiro se decide como fica na tela estreita e depois se acrescenta a versão larga.
No Mailvex cada bloco tem os próprios ajustes para tela estreita: espaçamentos, tamanho de fonte e ordem de colunas próprios. O compilador gera tabelas com media query, então o e-mail continua funcionando em clientes que as ignoram. A pré-visualização alterna entre desktop e celular dentro do editor, e o envio de teste sai dali mesmo.
Monte um e-mail que funcione em tela estreita.
Ver modelosPerguntas frequentes
Por que o texto no iPhone é maior do que defini?
O sistema amplia à força qualquer fonte menor que 13 pixels por legibilidade e não dá para desativar. O contêiner não muda, então o texto deixa de caber e o layout se desloca. Use 16 ou mais para o texto principal e não menos que 13 para o pequeno.
Basta um emulador de navegador para testar?
Não. Um emulador mostra como um site ficaria naquela largura de janela, enquanto um cliente de e-mail renderiza diferente. Envie o e-mail para si mesmo e abra em um aplicativo de e-mail real no celular.
O que fazer se as colunas não empilham em uma?
Parte dos clientes móveis não suporta media queries, então o código que muda a montagem nunca roda ali. A montagem precisa funcionar em uma única coluna por padrão, com a media query apenas melhorando onde for entendida.
