WordPress muestra pantalla en blanco en móvil solución

¿Qué es la pantalla en blanco en móvil en WordPress?

La llamada pantalla en blanco en móvil en WordPress se produce cuando accedes a tu sitio desde un teléfono o tableta y, en lugar de ver el contenido, solo aparece una página totalmente blanca o con un fondo vacío, sin texto ni imágenes. En muchos casos, la versión de escritorio funciona con normalidad, lo que complica el diagnóstico porque el error parece estar limitado solo a dispositivos móviles o a la vista responsive.

Aunque desde el punto de vista del usuario parece un fallo visual, en la mayoría de ocasiones se trata de un error de PHP, JavaScript o de configuración de caché que impide que la página se renderice correctamente en pantallas pequeñas. Entender qué está pasando es clave para aplicar la solución adecuada sin romper el resto del sitio.

Principales causas en dispositivos móviles

Cuando WordPress muestra pantalla en blanco solo en móvil, casi siempre hay una combinación de factores. Identificar la causa principal te ahorrará tiempo y evitará soluciones drásticas innecesarias, como reinstalar todo el sitio. Estas son las causas más habituales.

• Tema no responsive o mal actualizado: plantillas antiguas o mal codificadas que cargan archivos distintos en móvil y escritorio.
• Plugins de caché o minificación: generan versiones específicas para móvil que se corrompen o se sirven de forma incorrecta.
• Plugins de AMP o versiones móviles dedicadas: crean una versión alternativa del sitio para móvil que falla por errores de código.
• Errores de JavaScript solo en móvil: scripts que se ejecutan condicionalmente en pantallas pequeñas y bloquean el renderizado.
• Límites de memoria o tiempo de ejecución: en algunas configuraciones, la versión móvil dispara más peticiones o procesos.
• Configuraciones de CDN: reglas específicas para user agents móviles que sirven contenido incompleto o roto.
• Reglas CSS extremas: estilos que ocultan todo el contenido en ciertos anchos de pantalla (por ejemplo, display:none aplicado por error).

Comprobaciones rápidas antes de tocar WordPress

Antes de modificar archivos o desactivar plugins, conviene descartar problemas básicos del navegador o del dispositivo. Estos pasos iniciales son rápidos y, en algunos casos, resuelven el problema sin necesidad de cambios técnicos en WordPress.

• Prueba en otro navegador móvil (Chrome, Safari, Firefox) para ver si el fallo se repite.
• Usa el modo incógnito para evitar interferencias de extensiones o caché local.
• Borra la caché y cookies del navegador en el dispositivo afectado.
• Prueba en otro móvil o tableta para descartar un problema puntual del dispositivo.
• Utiliza las herramientas de desarrollador del navegador de escritorio con el modo dispositivo móvil activado.

Diagnóstico paso a paso en WordPress

Una vez descartados problemas del dispositivo, el siguiente paso es diagnosticar el origen dentro de WordPress. El objetivo es localizar si el fallo viene del tema, de un plugin, de la caché o de un error de servidor. Trabajar de forma ordenada te permitirá encontrar la causa sin dejar el sitio inoperativo.

1. Activar el modo debug de WordPress

El modo debug permite ver errores de PHP que normalmente se ocultan y que pueden estar provocando la pantalla en blanco. Para activarlo, edita el archivo wp-config.php y añade o modifica las siguientes líneas:

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', false );

Después de activar el debug, vuelve a cargar la web desde un móvil o usando el modo dispositivo móvil en el navegador de escritorio y revisa el archivo debug.log para ver si aparecen errores relacionados con el tema, plugins o funciones personalizadas.

2. Comprobar si el problema es de tema

Muchos errores de pantalla en blanco en móvil se deben a temas mal actualizados o incompatibles con la versión actual de WordPress o PHP. Para comprobarlo, cambia temporalmente a un tema por defecto (por ejemplo, Twenty Twenty-Four):

• Accede al escritorio de WordPress > Apariencia > Temas.
• Activa un tema por defecto oficial de WordPress.
• Vuelve a probar la web en móvil o en modo responsive.

Si la web vuelve a mostrarse correctamente en móvil, el problema está en tu tema actual. En ese caso, revisa actualizaciones disponibles, contacta con el desarrollador del tema o considera migrar a un tema más moderno y compatible.

3. Desactivar plugins de forma controlada

Si cambiar de tema no resuelve el problema, el siguiente paso es revisar los plugins. Un solo plugin puede generar errores de JavaScript o PHP que afecten solo a la vista móvil.

• Desactiva todos los plugins desde Plugins > Plugins instalados.
• Prueba la web en móvil. Si se ve bien, el problema está en uno o varios plugins.
• Activa los plugins uno a uno, probando la vista móvil tras cada activación.
• Cuando la pantalla vuelva a quedar en blanco, habrás identificado el plugin conflictivo.

4. Revisar la consola del navegador en modo móvil

Los errores de JavaScript pueden impedir que el contenido se renderice correctamente en móvil. Para detectarlos, abre la web en un navegador de escritorio y activa las herramientas de desarrollador (F12 o clic derecho > Inspeccionar). Luego:

• Activa el modo dispositivo (icono de móvil/tableta).
• Selecciona un tamaño de pantalla similar al de tu móvil.
• Recarga la página y revisa la pestaña Consola en busca de errores.

Si aparecen errores relacionados con archivos de tu tema, plugins de caché, sliders, constructores visuales o scripts de terceros, tendrás una pista clara de por dónde empezar a corregir.

Problemas con temas y diseño responsive

El tema es el responsable directo del diseño responsive. Un fallo en las hojas de estilo o en las plantillas específicas para móvil puede provocar que el contenido se oculte o que la página no llegue a renderizarse. Estos son los puntos críticos que debes revisar en tu tema.

1. Plantillas específicas para móvil

Algunos temas avanzados incluyen plantillas distintas para escritorio y móvil, o cargan archivos PHP diferentes según el ancho de pantalla o el user agent. Si la plantilla móvil contiene errores de código, puede dar lugar a una pantalla en blanco solo en dispositivos móviles.

• Revisa si tu tema tiene archivos como mobile.php o plantillas específicas para móvil.
• Comprueba si hay funciones en functions.php que detecten dispositivos móviles.
• Desactiva temporalmente opciones de "versión móvil" dentro de la configuración del tema.

2. Media queries y CSS que ocultan contenido

Un error frecuente es que, al ajustar el diseño responsive, se apliquen reglas CSS demasiado agresivas que terminan ocultando todo el contenido en ciertos anchos de pantalla. Por ejemplo, un display:none aplicado a un contenedor principal en móviles.

Revisa especialmente las media queries que afectan a anchos de pantalla inferiores a 768px o 992px, según el sistema de diseño que use tu tema. Asegúrate de que el contenedor principal de la página no se oculte ni se colapse a un tamaño cero.

3. Constructores visuales y secciones móviles

Si utilizas constructores como Elementor, WPBakery, Divi u otros, es posible que tengas secciones configuradas para mostrarse solo en escritorio y no en móvil. En ese caso, el usuario móvil podría ver una página vacía aunque técnicamente no haya error.

• Abre la página con el constructor visual.
• Revisa la configuración de visibilidad de cada sección, columna y widget.
• Asegúrate de que haya contenido configurado para mostrarse en móvil.

Si el constructor permite previsualizar la versión móvil, úsala para confirmar que realmente hay contenido visible y que no se ha ocultado todo por error.

Plugins que rompen la vista móvil

Algunos plugins funcionan de forma diferente en móvil y escritorio, o inyectan scripts y estilos adicionales solo en dispositivos móviles. Cuando algo falla en ese proceso, el resultado puede ser una pantalla en blanco en móvil mientras que la versión de escritorio sigue funcionando.

1. Plugins de caché y optimización

Plugins como WP Rocket, W3 Total Cache, LiteSpeed Cache, Autoptimize y similares ofrecen opciones específicas para móviles: caché separada, minificación condicional, combinación de archivos CSS/JS, etc. Una configuración inadecuada puede generar archivos corruptos o referencias rotas en la versión móvil.

• Desactiva temporalmente la caché para móviles.
• Deshabilita la minificación y combinación de CSS y JS.
• Vacía toda la caché (incluida la caché móvil, si existe).
• Prueba de nuevo la web en un móvil o en modo responsive.

Si al desactivar estas opciones la web vuelve a funcionar en móvil, reactiva las optimizaciones una a una hasta encontrar la que provoca el fallo. En muchos casos, basta con excluir ciertos archivos JS o CSS de la minificación.

2. Plugins de AMP y versiones móviles dedicadas

Los plugins de AMP o de "versión móvil" generan una versión alternativa de tu sitio para dispositivos móviles. Si hay un error en esa versión, el usuario puede ver una pantalla en blanco al acceder desde el móvil, mientras que la versión normal se muestra bien en escritorio.

• Desactiva temporalmente el plugin de AMP o de versión móvil.
• Comprueba si el sitio vuelve a mostrarse correctamente en móvil.
• Revisa los registros de errores y la configuración del plugin.

Si el problema está en AMP, considera desactivarlo hasta que puedas revisar la plantilla AMP o buscar una alternativa más estable. Un AMP mal configurado puede afectar seriamente a la experiencia móvil.

3. Otros plugins conflictivos habituales

Además de la caché y AMP, hay otros tipos de plugins que suelen generar problemas específicos en móvil:

• Sliders y galerías que cargan scripts distintos en móvil.
• Plugins de pop-ups o barras flotantes que ocupan toda la pantalla en móvil.
• Plugins de anuncios que insertan código de terceros no responsive.
• Plugins de seguridad que bloquean ciertos user agents móviles.

Caché y CDN como causa de pantalla blanca

La caché y las redes de distribución de contenido (CDN) mejoran el rendimiento, pero también pueden servir versiones desactualizadas o incompletas del sitio, especialmente cuando se aplican reglas específicas para móviles. Esto puede derivar en una pantalla en blanco en móvil mientras que la versión de escritorio funciona correctamente.

1. Caché del servidor y del plugin

Además de la caché del navegador, tu sitio puede tener:

• Caché a nivel de plugin (WP Rocket, LiteSpeed, etc.).
• Caché a nivel de servidor (Nginx, Varnish, Redis, etc.).
• Caché específica para móviles o para ciertos user agents.

Para descartar problemas de caché:

• Vacía la caché del plugin desde su panel de control.
• Si tu hosting ofrece caché propia, vacíala desde el panel del proveedor.
• Desactiva temporalmente cualquier opción de caché móvil.

2. Configuración de CDN

Si utilizas una CDN como Cloudflare, BunnyCDN u otra, es posible que tengas reglas de caché o de optimización específicas para móviles. Un error en estas reglas puede hacer que la CDN sirva una versión vacía o corrupta de la página.

• Activa el modo desarrollo en la CDN (si existe) para desactivar temporalmente la caché.
• Revisa las reglas de página y las configuraciones que afecten a user agents móviles.
• Comprueba que la CDN no esté minificando o combinando archivos de forma agresiva.

Límites de servidor y errores PHP

Aunque pueda parecer que la versión móvil consume menos recursos, en algunos casos genera más peticiones o ejecuta más procesos (por ejemplo, al cargar imágenes adaptativas o scripts específicos). Si el servidor está muy limitado, esto puede desencadenar errores de PHP que se traducen en pantalla en blanco.

1. Revisar el registro de errores del servidor

Además del archivo debug.log de WordPress, tu servidor suele tener un registro de errores PHP accesible desde el panel de hosting. Revisa este registro justo después de reproducir el error en móvil para detectar:

• Errores Fatal error o Parse error.
• Mensajes de Allowed memory size exhausted.
• Errores de tiempo de ejecución (max_execution_time).

2. Aumentar límites de PHP

Si detectas errores relacionados con memoria o tiempo de ejecución, puedes intentar aumentar los límites de PHP desde php.ini, .htaccess o el panel de tu hosting. Algunos valores habituales son:

memory_limit = 256M
max_execution_time = 120
post_max_size = 64M
upload_max_filesize = 64M

Tras aplicar los cambios, reinicia los servicios de PHP si tu hosting lo permite, o espera unos minutos y vuelve a probar la web en móvil.

3. Compatibilidad de versiones de PHP

Algunos temas y plugins no son totalmente compatibles con versiones muy nuevas o muy antiguas de PHP. Aunque el problema no debería afectar solo a móvil, en la práctica ciertos scripts pueden ejecutarse solo en esa vista y fallar.

• Comprueba la versión de PHP que usa tu sitio (idealmente 8.0 o superior, según compatibilidad).
• Consulta la documentación de tu tema y plugins para ver qué versiones soportan.
• Si sospechas de incompatibilidad, prueba temporalmente con una versión de PHP recomendada por tu proveedor de hosting.

Buenas prácticas para evitar que vuelva a ocurrir

Una vez resuelta la pantalla en blanco en móvil, es importante aplicar una serie de buenas prácticas para minimizar la probabilidad de que el problema reaparezca tras futuras actualizaciones o cambios en el sitio.

1. Mantener tema y plugins actualizados

Las actualizaciones corrigen errores, mejoran la compatibilidad con nuevas versiones de WordPress y PHP, y suelen incluir mejoras en el comportamiento responsive. Sin embargo, es recomendable:

• Probar las actualizaciones en un entorno de pruebas o staging.
• Realizar copias de seguridad antes de actualizar.
• Revisar la web en móvil tras cada actualización importante.

2. Elegir un tema realmente responsive y mantenido

No todos los temas "responsive" están bien implementados. A la hora de elegir o mantener un tema:

• Prioriza temas con buenas valoraciones y actualizaciones frecuentes.
• Evita temas que dependan de demasiados scripts externos para la versión móvil.
• Comprueba la demo del tema en distintos dispositivos antes de adoptarlo.

3. Limitar el número de plugins y revisar su calidad

Cada plugin añade código y posibles puntos de fallo. Para reducir riesgos:

• Elimina plugins que no uses o que aporten funciones prescindibles.
• Evita tener varios plugins que hagan lo mismo (por ejemplo, varios de caché).
• Escoge plugins con soporte activo y buena reputación.

4. Configurar con cuidado la caché y la optimización

Las optimizaciones agresivas suelen ser la causa de errores difíciles de detectar. Algunas recomendaciones:

• Activa las optimizaciones de forma gradual, probando siempre la versión móvil.
• Excluye de minificación archivos JS críticos si detectas errores en consola.
• Documenta los cambios de configuración para poder revertirlos fácilmente.

Preguntas frecuentes