Qué es
Las pantallas de los móviles son físicamente estrechas, pero durante mucho tiempo la mayoría de las webs se diseñaron pensando en una pantalla de escritorio mucho más ancha. Para que esas webs antiguas siguieran siendo usables, los navegadores móviles asumen por defecto, en silencio, que la pantalla mide unos 980 píxeles de ancho — más o menos el tamaño de un escritorio — y luego reducen el resultado entero para que quepa, por eso una página no preparada puede verse diminuta y alejada en un móvil hasta que alguien hace zoom con dos dedos.
La etiqueta meta viewport es una sola línea de código, <meta name="viewport" content="width=device-width, initial-scale=1">, que anula ese comportamiento antiguo por defecto y le dice al navegador "ajusta de verdad esta página al ancho real de la pantalla, con el zoom normal". Es lo que hace que un diseño responsive (que se adapta a distintos tamaños de pantalla) realmente funcione en un móvil.
En qué afecta
Sin esta etiqueta, una página cuidadosamente diseñada para reajustarse y cambiar de tamaño en móviles nunca llega a tener esa oportunidad — el móvil la renderiza como un diseño de escritorio encogido, sin importar lo bien construido que esté el diseño de base. Es un ajuste puramente técnico y de todo o nada: o la etiqueta está presente y es correcta, o cada visitante desde el móvil ve el diseño equivocado, por muy bien diseñado que esté el resto de la web.
Como más de la mitad del tráfico web de la mayoría de sitios llega desde móviles, esta única línea que falta puede afectar a la mayoría de tus visitantes antes incluso de que empiecen a leer.
Cómo solucionarlo
- Consulta el código HTML de tu página y revisa dentro de la sección
<head>si hay una etiqueta que empiece por<meta name="viewport". - Si falta, añade
<meta name="viewport" content="width=device-width, initial-scale=1">justo dentro de la sección<head>. - Si usas un creador de webs (Squarespace, Wix, Webflow, WordPress), esto lo configura automáticamente la plataforma — que falte casi siempre apunta a un bloque de código personalizado que lo está anulando, así que revisa cualquier código personalizado que hayas añadido en el
<head>. - Evita añadir
maximum-scale=1ouser-scalable=noa esta misma etiqueta — esas adiciones impiden a los visitantes hacer zoom con los dedos, lo que crea un problema de accesibilidad aparte. - Carga la página en un móvil real (o en el modo de vista previa móvil de tu navegador) después para confirmar que ahora ocupa la pantalla con un tamaño legible en lugar de verse alejada.