Una web suele verse distinta en el móvil por uno de tres motivos: el diseño se adapta a la pantalla más estrecha (lo esperado), el móvil recibe otra versión de la página (caché, detección de dispositivo o plugins) o el navegador y los ajustes del móvil la muestran de otra forma (motor de Safari, modo oscuro, tamaño de letra). Averigua primero en cuál de los tres casos estás, porque las soluciones no tienen nada que ver entre sí.
Primero, reprodúcelo en el ordenador
Abre la misma URL en vista móvil en tu ordenador: con el modo dispositivo de Chrome DevTools o con una extensión de vista móvil como Mobile View Extension, que recarga la página con user agent móvil y tamaño de pantalla de móvil.
- ¿También se ve mal en la vista móvil? Es un problema de diseño o de contenido. Empieza por las causas 1–4.
- ¿Se ve bien en la vista móvil pero mal en el móvil? Es un problema de entrega o del navegador. Empieza por las causas 5–11.
Causas de diseño y contenido
1. Falta la etiqueta meta viewport o está mal
Sin <meta name="viewport" content="width=device-width, initial-scale=1">, los móviles muestran la página como una de escritorio de unos 980 px y la encogen, así que todo se ve diminuto. Con un valor incorrecto, como un width=1024 fijo, la página se escala de forma rara. Mira la etiqueta meta viewport explicada.
2. Algo es más ancho que la pantalla
Un solo elemento de ancho fijo (una tabla, un contenido incrustado, una URL larga, una imagen sin max-width: 100%) hace que toda la página se desplace de lado, y algunos navegadores alejan el zoom para que quepa. Encuéntralo en DevTools buscando los elementos cuyo scrollWidth supera el viewport.
3. Los breakpoints cambian el diseño en un ancho inesperado
Puede que tu móvil en horizontal sea más ancho de lo que crees, o que una tablet caiga del lado de escritorio de un breakpoint de 768 px. Comprueba el ancho real del dispositivo en la tabla de tamaños de pantalla de iPhone y revisa tus breakpoints.
4. Hay contenido oculto o reordenado en móvil
Los maquetadores visuales y el CSS suelen ocultar secciones con display: none en anchos pequeños, o reordenar columnas. Es una decisión de diseño, pero es fácil olvidar que existe. Revisa los ajustes de visibilidad solo para móvil.
Causas de entrega: el móvil recibe otra página
5. La caché sirve una versión antigua
El navegador del móvil puede tener CSS antiguo guardado, o tu CDN o plugin de caché puede mantener una caché móvil aparte que no se ha vaciado. Vacía la caché del sitio y la del CDN y recarga en el móvil en una pestaña privada.
6. La detección de dispositivo sirve otra plantilla
Algunos temas, plugins y servidores miran el user agent y sirven otro HTML a los móviles. Una ventana de navegador de escritorio, aunque sea estrecha, nunca ve esa versión. Una vista móvil que envía un user agent móvil real, sí. Cómo funcionan los user agents se explica en qué hace un user agent switcher.
7. Anuncios, tests A/B y personalización
Los espacios publicitarios, los experimentos y el contenido según la ubicación pueden variar por dispositivo o por visita. Prueba sin sesión iniciada, en una pestaña privada y con los experimentos desactivados si tu herramienta lo permite.
Causas del navegador y los ajustes: el móvil lo muestra distinto
8. El motor de Safari se comporta de otra manera
Todos los navegadores de iPhone usan WebKit en su mayoría. Las diferencias aparecen en los controles de formulario, position: sticky dentro de contenedores con overflow, 100vh con la barra de direcciones que se contrae (usa 100dvh) y funciones nuevas de CSS. Prueba en Safari de iOS con el Simulator de Xcode o en un dispositivo real; mira probar en iPhone.
9. El navegador aplica el modo oscuro
Algunos navegadores, como Samsung Internet, pueden forzar colores oscuros en las páginas que no declaran su propio esquema de color. Los logos con fondo transparente y los colores fijos acaban siendo ilegibles. Declara color-scheme y ofrece un tema oscuro con prefers-color-scheme, o fija explícitamente colores claros.
10. Las fuentes y el tamaño del texto cambian
Si una fuente web no carga, el móvil usa su fuente del sistema, que tiene otros anchos, y el texto salta de línea de otra manera. Los usuarios también pueden ampliar el texto en los ajustes del navegador o de accesibilidad del sistema, y los navegadores móviles a veces agrandan el texto solos en horizontal. Usa unidades relativas, deja que el texto salte de línea y pon text-size-adjust: 100% si el agrandado automático da problemas.
11. Funciones del navegador cambian la página
Los bloqueadores de contenido, los modos de ahorro de datos, la vista de lectura y la traducción pueden cambiar lo que ve un visitante. Si una sola persona ve un diseño raro, pregúntale qué navegador y qué funciones usa antes de rehacer nada.
Una tabla rápida de diagnóstico
| Síntoma | Causa más probable |
|---|---|
| Todo diminuto, hay que hacer zoom | Falta la etiqueta viewport (1) |
| La página se desplaza de lado | Elemento más ancho que la pantalla (2) |
| Bien en la vista previa, diseño antiguo en el móvil | Caché (5) |
| Diseño completamente distinto en el móvil | Detección de dispositivo o tema móvil (6) |
| Solo falla en iPhone | Diferencia de Safari/WebKit (8) |
| Colores invertidos o logo invisible | Modo oscuro forzado (9) |
| El texto salta de línea distinto, los botones se desbordan | Fuente de reserva o escalado del texto (10) |
Cómo evitarlo la próxima vez
Revisa las páginas nuevas en vista móvil mientras las construyes, no después del lanzamiento, y ten un checklist corto para cada publicación. El checklist de pruebas de web móvil incluye uno. Para arreglos específicos de WordPress, mira cómo hacer responsive una web de WordPress.
Preguntas frecuentes
¿Por qué mi web se ve distinta en el móvil que en la vista móvil de Chrome?
La vista móvil de Chrome usa el motor de Chrome y los archivos en caché de tu ordenador. El móvil puede usar el motor de Safari, tener otros archivos en caché o una caché móvil del CDN, o aplicar modo oscuro o escalado del texto.
¿Por qué mi web de WordPress se ve diferente en el móvil?
Las causas más comunes son ajustes del maquetador aplicados solo al tamaño de escritorio, un plugin de caché que sirve una caché móvil antigua y temas o plugins que sirven un diseño móvil aparte.
¿Por qué mi web se ve alejada en el móvil?
Normalmente falta la etiqueta meta viewport, o hay un elemento más ancho que la pantalla y el navegador aleja el zoom para que quepa.