El correo se descoloca en el móvil: qué revisar y cómo arreglarlo
Siete síntomas, sus causas y el orden para corregirlos
Mailvex · 4 septiembre 2026 · 5 min de lectura
En el ordenador el correo se ve bien; en el móvil el texto encoge, las columnas no se apilan y el botón se sale del borde. Hay siete causas, y casi todas remiten a lo mismo: la maquetación se hizo para pantalla ancha y la estrecha la recibe sin cambios. A continuación, los síntomas, las causas y el orden para corregirlos.
Primero, determina qué se rompió exactamente
Antes de arreglar nada, determina qué se rompió exactamente. Abrir el correo en el móvil y mirarlo entero no basta: hay que saber qué elemento se comporta mal.
Un truco práctico: abre el correo en paralelo en el móvil y en el ordenador. La diferencia se ve al instante y sabrás si es cuestión de tamaño, de maquetación o de márgenes.
Importa saber que parte de los clientes de correo móviles no admite media queries en absoluto. El código que cambia la maquetación en pantalla estrecha simplemente no se ejecutará allí. Así que la maquetación debe funcionar antes de cualquier adaptación, y la media query solo mejorarla.
Siete síntomas y sus causas
Siete síntomas cubren casi todos los casos. Encuentra el tuyo en la primera columna.
| Síntoma | Causa | Qué hacer |
|---|---|---|
| Texto más pequeño de lo esperado | tamaño fijo por debajo de 16 píxeles | pon 16 o más; un iPhone amplía lo menor de 13 y descoloca la maquetación |
| Correo más ancho que la pantalla | ancho fijo en píxeles | 600 en escritorio, 100 por ciento en pantalla estrecha |
| Las columnas no se apilaron | maquetación con bloques sin alternativa | tablas más una media query, algunos clientes las ignoran |
| El botón no se pulsa | altura por debajo de 44 píxeles | 44 como mínimo, mejor 48, márgenes en el propio enlace |
| Imágenes estiradas | sin límite de ancho | ancho máximo 100 por ciento, alto automático |
| Los márgenes se descolocaron | márgenes en bloques y no en celdas | pásalos a las celdas de la tabla |
| Correo recortado | peso por encima del umbral | mantente bajo 100 KB, la plataforma añade su código encima |
Las dos primeras filas ocurren más que todas las demás juntas. Sobre todo la primera: casi nadie escribe sobre ella y las consecuencias se notan.
La trampa de la fuente en iPhone
La trampa de la fuente merece su propio apartado porque no es evidente.
Un iPhone amplía a la fuerza cualquier fuente menor de 13 píxeles. Lo hace por legibilidad y no se puede desactivar.
El problema es que el contenedor no cambia. El texto creció mientras el espacio para él siguió igual, así que deja de caber. Las líneas se cortan donde no toca, el bloque crece hacia abajo, los elementos vecinos se desplazan.
De ahí la regla: texto principal desde 16 píxeles, texto pequeño como pies de imagen no menor de 13. Todo lo que quede por debajo produce una maquetación impredecible en parte de los dispositivos.
El orden para corregir
Corrige los síntomas en un orden concreto: algunas correcciones resuelven varios problemas a la vez.
- primero los tamaños de fuente: 16 o más para el texto, no menos de 13 para lo pequeño
- después el ancho: 600 píxeles en pantalla ancha, 100 por ciento en estrecha
- luego la maquetación: tablas en lugar de bloques, una sola columna por defecto
- a continuación los botones: altura desde 44, mejor 48, márgenes en el enlace
- al final los márgenes: pásalos de los bloques a las celdas de tabla
El orden no es arbitrario. Los tamaños de fuente afectan a la altura de los bloques, el ancho a los saltos de línea, la maquetación a todo. Si empiezas por los márgenes, tendrás que rehacerlos tras cada cambio posterior.
Cómo probar en lugar de adivinar
Revisar el correo en un emulador de navegador no basta. Muestra cómo se vería una web con ese ancho de ventana, no cómo un cliente de correo renderiza el correo en un dispositivo real.
La prueba mínima es enviarte el correo y abrirlo en el móvil. No en la vista previa de tu plataforma de envío, sino en la aplicación de correo real donde lo verá el destinatario.
- ábrelo en el móvil y desplázate hasta el final
- pulsa el borde de cada botón, no el centro
- míralo en modo oscuro: ¿se fundió el texto con el fondo?
- desactiva la carga de imágenes y confirma que el mensaje se mantiene
- comprueba que el texto cabe en sus bloques sin partir palabras
El segundo punto es el que más importa. Pulsar el borde revela si se pulsa todo el botón o solo la etiqueta, y esa es la causa más frecuente de clics perdidos en el móvil.
Cómo lo resuelve un constructor
La mayoría de los síntomas de la tabla surge porque la maquetación se hace para pantalla ancha y el móvil la recibe sin cambios. El orden correcto es el inverso: primero se decide cómo se ve en pantalla estrecha y después se añade la versión ancha.
En Mailvex cada bloque tiene sus propios ajustes para pantalla estrecha: márgenes, tamaño de fuente y orden de columnas propios. El compilador genera tablas con media query, así que el correo sigue funcionando en clientes que las ignoran. La vista previa cambia entre escritorio y móvil dentro del editor, y el envío de prueba sale de ahí mismo.
Monta un correo que funcione en pantalla estrecha.
Ver plantillasPreguntas frecuentes
¿Por qué el texto en iPhone es más grande de lo que puse?
El sistema amplía a la fuerza cualquier fuente menor de 13 píxeles por legibilidad y no se puede desactivar. El contenedor no cambia, así que el texto deja de caber y la maquetación se descoloca. Usa 16 o más para el texto principal y no menos de 13 para lo pequeño.
¿Basta con un emulador de navegador para probar?
No. Un emulador muestra cómo se vería una web con ese ancho de ventana, mientras que un cliente de correo renderiza distinto. Envíate el correo y ábrelo en una aplicación de correo real en el móvil.
¿Qué hago si las columnas no se apilan en una?
Parte de los clientes móviles no admite media queries, así que el código que cambia la maquetación nunca se ejecuta allí. La maquetación debe funcionar en una sola columna por defecto, y la media query solo mejorarla donde se entienda.
