Por qué tu página web no se ve bien en computador y celular: causas y soluciones
Si tu web se ve perfecta en el ordenador de escritorio pero se rompe en el móvil, o al revés, no estás solo. Es uno de los problemas más comunes que veo en auditorías. Y no es un capricho estético: según StatCounter, el 64,35% del tráfico web global ya viene del móvil. Si tu página no se ve bien en computador y celular, estás perdiendo a la mayoría de tus visitantes.
La buena noticia es que casi todos estos problemas tienen una causa identificable y una solución concreta. En este artículo te explico, con datos y pasos prácticos, por qué tu web se ve mal en unos dispositivos y bien en otros, y cómo arreglarlo en cada caso.
La causa más frecuente: el diseño no es responsivo
El motivo número uno por el que una web se ve mal en el móvil es que el diseño no es responsivo. Un diseño responsivo adapta automáticamente el layout al ancho de la pantalla del dispositivo: la misma web se reordena para verse bien en un móvil de 360 px, una tablet de 768 px o un monitor de 1920 px. Si el tuyo no lo hace, el móvil muestra la versión de escritorio encogida, con textos minúsculos, menús inutilizables y botones que no se pueden pulsar.
Según el Web Almanac de 2024, el 94% de las páginas web ya pasan la auditoría de viewport de Google (la comprobación de que el sitio se ajusta bien al móvil). Si tu web está en el 6% restante, ese es tu problema principal. Cómo verificarlo:
- Abre tu web en el móvil y comprueba si tienes que hacer zoom para leer.
- Mira si hay scroll horizontal (la página se desplaza de lado).
- Comprueba si el menú y los botones se pueden tocar con el pulgar.
Solución: si usas WordPress, cambia a un tema responsivo moderno (la gran mayoría de temas actuales lo son) o, si usas un constructor como Elementor, revisa las opciones de respuesta móvil de la página. Muchos temas tienen un modo mobile para ajustar los elementos por separado por dispositivo.
Falta la etiqueta viewport en el código
A veces el problema no es el tema, sino que falta la metaetiqueta viewport en el <head> de la web. Esta etiqueta le dice al navegador del móvil que el ancho de la pantalla es el ancho de vista del contenido. Sin ella, el móvil intenta mostrar la web como si fuera un escritorio. Esta es una de las fallas que detecta la auditoría de Google.
Solución: añade esta línea al <head> de tu tema:
<meta name="viewport" content="width=device-width, initial-scale=1">Imágenes demasiado grandes o sin dimensiones definidas
Una imagen de 3000 px de ancho que se carga en un móvil de 400 px no solo se ve mal: ralentiza la página y puede hacer que los elementos se desborden. Además, si las imágenes no tienen atributos width y height, el navegador no reserva su espacio y la página “salta” mientras carga (lo que Google llama CLS, un factor de Core Web Vitals).
Solución: sube las imágenes con las dimensiones reales que se mostrarán, comprímelas y usa formatos modernos como WebP. Herramientas gratuitas: Squoosh o TinyPNG. En el editor de WordPress, al añadir una imagen se definen automáticamente sus dimensiones.
Tipografía ilegible o tamaños de fuente inadecuados
Un texto con 12 px en el móvil es ilegible y obliga a hacer zoom. La recomendación general es que el texto del cuerpo tenga al menos 16 px en el móvil. También hay que tener cuidado con las fuentes muy decorativas, que pierden legibilidad en pantallas pequeñas.
Solución: revisa la tipografía en modo móvil y aumenta el tamaño si es necesario. Asegúrate de que haya suficiente contraste entre el texto y el fondo (Google lo evalúa en su auditoría).
Elementos con ancho fijo o tablas que desbordan
Si añadiste un elemento con un ancho fijo en píxeles (por ejemplo, una imagen de 900 px, una tabla ancha o un iframe de un video), ese elemento se sale de la pantalla del móvil y crea scroll horizontal. Es una de las causas más repetidas en webs hechas con constructores visuales donde se forzó el ancho.
Solución: usa anchos en porcentaje o max-width: 100% en lugar de píxeles fijos. Busca en tu web el elemento que sobresale: puedes identificarlo abriendo el modo responsivo de tu navegador (F12 en Chrome) y viendo qué elemento se sale.
Menú y botones difíciles de tocar en el móvil
En el móvil se toca con el dedo, no con el ratón. Si los botones son demasiado pequeños o están demasiado juntos, el usuario los pulsa mal y abandona. La pauta de usabilidad móvil recomienda áreas táctiles de al menos 44 x 44 px.
Solución: aumenta el tamaño de los botones y el espacio entre ellos en la vista móvil, y comprueba que el menú (normalmente en formato hamburguesa ☰) se despliega y navega correctamente.
Cómo diagnosticar rápidamente si tu web es responsiva
Antes de tocar nada, mide. Dos herramientas gratuitas y oficiales de Google:
- Mobile-Friendly Test: te dice con un sí/no si tu página es usable en móvil y detecta problemas concretos.
- PageSpeed Insights: te da una puntuación y enumera las causas de los problemas de renderizado móvil.
- Verifica que tu tema es responsivo y que la etiqueta viewport está presente.
- Pasa el Mobile-Friendly Test y PageSpeed Insights de Google.
- Corrige el scroll horizontal: busca y arregla el elemento que se desborda.
- Optimiza y define las dimensiones de las imágenes.
- Sube el tamaño de fuente del cuerpo a 16 px mínimo en móvil.
- Amplía botones y menú para tocar bien con el dedo.
Ambas son gratuitas y te señalan el problema exacto, en lugar de que vayas a ciegas. La velocidad importa mucho: según Google, el 53% de los usuarios abandona una página móvil que tarda más de 3 segundos en cargar.
Checklist para que tu web se vea bien en todos los dispositivos
Preguntas frecuentes
¿Por qué mi web se ve bien en el ordenador pero mal en el móvil?
Lo más probable es que el tema o el diseño no sea responsivo, que falte la etiqueta viewport, o que haya elementos con ancho fijo que se desbordan. Pasa el Mobile-Friendly Test de Google para identificar la causa exacta.
¿Qué significa que una web sea responsiva?
Que se adapta automáticamente al ancho de pantalla del dispositivo, reorganizando menús, textos e imágenes para verse bien en móvil, tablet y escritorio sin necesidad de hacer zoom.
¿Cómo sé si mi página tiene scroll horizontal en el móvil?
Abre tu web en el móvil e intenta deslizar de lado. Si puedes desplazarte horizontalmente, hay un elemento que desborda. Suelen ser imágenes, tablas o iframes con ancho fijo.
¿Elementor o un tema bloque pueden arreglar la vista móvil?
Elementor y los temas de bloques son responsivos por defecto, pero pueden tener elementos con ajustes que rompan el móvil si se configuran mal. Revisa las opciones de respuesta del constructor y el modo móvil de la página.
¿El problema de visualización afecta a mi posicionamiento en Google?
Sí. Google usa un rastreo mobile-first (indexa primero la versión móvil) y evalúa la usabilidad móvil como factor de ranking. Una web que no se ve bien en el móvil pierde posiciones frente a competidores responsivos.
Que tu web se vea bien en computador y celular no es un lujo: es un requisito cuando el 64% del tráfico ya viene del móvil. Empieza por medir con las herramientas gratuitas de Google, corrige el tema no responsivo o los elementos que desbordan, y verifica el resultado. En la mayoría de los casos, el problema se resuelve en una tarde y se nota en el comportamiento de tus visitantes.