Qué es
Esta comprobación trata la misma etiqueta meta viewport explicada de forma más técnica en nuestra otra guía sobre el viewport, pero desde el ángulo de lo que realmente experimenta un visitante móvil: sin ella, el navegador de un teléfono asume que la página está diseñada para una pantalla de escritorio mucho más ancha y encoge todo para que quepa, lo que resulta en texto diminuto y difícil de leer y un diseño que exige pellizcar y desplazarse constantemente solo para leer con normalidad.
En la mayoría de las webs actuales, sobre todo las que ya tienen un diseño realmente adaptable (responsive) incorporado, esto es puramente un problema de configuración ausente y no un problema de diseño — el diseño adaptable existe, simplemente nunca se le da la oportunidad de activarse.
En qué afecta
En la mayoría de las webs de hoy, los visitantes móviles representan más de la mitad del tráfico total, así que un problema de renderizado móvil tan fundamental como este no es un caso aislado — muy a menudo está afectando a la mayoría de todas las personas que visitan la web en absoluto. Un visitante que llega a una página que se ve rota, apretada y difícil de navegar en su teléfono tiene muchas más probabilidades de irse inmediatamente en lugar de pelearse pellizcando y haciendo zoom para leer texto de tamaño normal.
Como este problema concreto resulta tan visualmente obvio en el momento en que se comprueba (basta con abrir la web en un teléfono), también es una de las cosas más rápidas de confirmar que se han arreglado una vez corregido el ajuste subyacente.
Cómo solucionarlo
- Abre tu web en un teléfono real, o usa la vista previa móvil/barra de dispositivos integrada en tu navegador (normalmente disponible en las herramientas de desarrollador).
- Si la página se ve como un diseño de escritorio encogido en lugar de un diseño móvil correctamente dimensionado, es muy probable que este ajuste sea la causa.
- Consulta nuestra guía técnica del viewport para ver la solución exacta en código — una sola etiqueta
<meta name="viewport">resuelve esto prácticamente en todos los casos. - Si usas un creador de webs, esto lo configura automáticamente la plataforma casi siempre — una vista móvil rota ahí suele apuntar más bien a un fragmento de código personalizado que está interfiriendo.
- Vuelve a comprobar la página en un teléfono después del arreglo para confirmar que el texto y el diseño ahora tienen el tamaño correcto sin necesidad de hacer zoom.