Adaptar la página a la pantalla de un móvil
Descripción
Este criterio comprueba que la página se ve bien en un móvil. iPand la carga en un Pixel 7 simulado, de 412 px de ancho, y comprueba cuatro puntos: la etiqueta viewport declara width=device-width sin bloquear el zoom, la página no se desborda a lo ancho, al menos el 60 % del texto visible mide 12 px o más, y el diseño se mueve poco durante la carga (CLS de 0,1 como máximo).
Por qué importa para las IA
Google indexa la versión móvil de tus páginas, que rastrea con su rastreador para smartphones, y tanto AI Overviews como AI Mode se apoyan en ese índice. Google también cuenta la adaptación al móvil entre los elementos de una buena experiencia en la página, que recomienda para sus funciones de IA.
- Sin etiqueta viewport, el móvil muestra la página como una pantalla de ordenador en miniatura: texto diminuto y zoom obligatorio.
- Bloquear el zoom (user-scalable=no) impide leer la página a las personas con baja visión; las pautas de accesibilidad WCAG exigen poder ampliar al menos al doble.
- Un contenido que se mueve durante la carga hace pulsar donde no se quería: el CLS mide esos desplazamientos, y web.dev lo considera bueno con 0,1 como máximo.
Cómo corregirlo
- 1 Declara el área de visualización Coloca en la cabecera de la página la etiqueta <meta name="viewport" content="width=device-width, initial-scale=1">. No le añadas user-scalable=no ni un maximum-scale inferior a 2: tus visitantes deben poder hacer zoom. Es el punto que más pesa en el criterio.
- 2 Elimina el desbordamiento horizontal La página no debe ser más ancha que la pantalla, es decir, 412 px para iPand. Busca los elementos de ancho fijo: imágenes, tablas, vídeos insertados, bloques con medidas en píxeles. Da a las imágenes max-width: 100% y prefiere diseños flexibles (Flexbox, Grid) a los anchos fijos.
- 3 Aumenta el tamaño del texto Al menos el 60 % del texto visible debe medir 12 px o más. Mantén el cuerpo del texto cerca de 16 px, el tamaño por defecto de los navegadores, y revisa los avisos legales, los menús y los pies de página, que a menudo tienen una letra demasiado pequeña.
- 4 Reserva el espacio de las imágenes y los bloques insertados El CLS no debe superar 0,1. Indica width y height en las imágenes y los vídeos, reserva la altura de los banners, los anuncios y los widgets antes de que se carguen, y no insertes contenido por encima del que ya se muestra.
Claves
Google lee la versión móvil de tu página. Declara el área de visualización sin bloquear el zoom, evita el desbordamiento y mantén un texto legible y un diseño estable.
