En resumen
Qué se comprueba
la etiqueta viewport y el comportamiento real de la página a 375 px (móvil) y 768 px (tableta).
Resultado esperado
el contenido cabe en el ancho disponible sin desplazamiento horizontal y sin que el navegador tenga que encogerlo.
Por qué importa
Google indexa y posiciona con la versión móvil de tu web, rastreada con su agente de smartphone.
Severidad en Wakaris
Crítico. Falla en el 23 % de las páginas analizadas.
Qué es y qué comprueba este hallazgo
Este hallazgo salta cuando tu página no se adapta al ancho de la pantalla en la que se muestra. Wakaris lo detecta con tres evidencias: si la etiqueta viewport está configurada, y si la página se comporta bien cuando se carga a 375 píxeles de ancho, que es el tamaño de un móvil habitual, y a 768 píxeles, que es el de una tableta en vertical.
La etiqueta viewport es una línea en la cabecera del HTML que le dice al navegador del móvil cómo debe dimensionar la ventana de visualización. Según MDN, sin ella algunos dispositivos dibujan la página en una ventana virtual más ancha que la pantalla y luego la encogen para que quepa: en un móvil de 640 píxeles puede dibujarse a 980 y reducirse después.
Ser responsive es lo contrario de ese encogimiento: el diseño se reorganiza según el espacio disponible, las columnas se apilan, las imágenes se ajustan y el texto conserva un tamaño legible.
Cómo se comprueba
Wakaris carga la URL que le indiques en dos anchos distintos, 375 y 768 píxeles, y observa qué ocurre con el contenido en cada uno. Si hay elementos que se salen del ancho disponible y provocan desplazamiento horizontal, o si la página no se reorganiza y aparece encogida, la evidencia correspondiente falla. Aparte, lee la cabecera del HTML y comprueba si la etiqueta viewport existe y está configurada para usar el ancho del dispositivo. El informe te dice cuál de las tres evidencias ha fallado y en qué página, sin instalar nada.
La configuración que recomienda tanto la documentación de MDN como la de Google es width=device-width, initial-scale=1. La primera parte indica al navegador que use el ancho real del dispositivo; la segunda fija una relación 1:1 entre los píxeles de CSS y los del dispositivo, sea cual sea la orientación.
Es un hallazgo binario: la página se adapta o no. El informe no da una cifra sino el resultado de cada comprobación.
Por qué importa
Importa por dos motivos, y el segundo pesa más de lo que parece.
El primero es quien visita la web desde un móvil. Si la página se muestra encogida, el texto queda ilegible y los botones demasiado pequeños para el dedo. Si el contenido se sale por la derecha, hay que desplazarse de lado para leer cada línea. web.dev lo resume así: no se debe obligar a nadie a desplazarse horizontalmente ni a alejar el zoom para ver la página entera.
El segundo es el posicionamiento. Google documenta que usa la versión móvil del contenido, rastreada con el agente de smartphone, para indexar y posicionar: la indexación mobile-first. Lo que tu web muestra en móvil es lo que Google evalúa. Añade que adaptarse al móvil no es obligatorio para aparecer en resultados, pero lo recomienda muy encarecidamente, y que el diseño responsive es el patrón que aconseja.
Hay además una dimensión de accesibilidad: el criterio 1.4.10 de las WCAG 2.2, de nivel AA, pide contenido sin desplazamiento en dos dimensiones a un ancho equivalente a 320 píxeles de CSS.
Causas comunes
Las causas se agrupan en tres familias; conviene identificar la tuya antes de tocar nada.
La primera es la etiqueta viewport ausente o mal configurada. Es la más habitual en webs antiguas o montadas a mano: sin ella, el navegador móvil encoge toda la página. También falla cuando la etiqueta fija un ancho en píxeles en lugar del del dispositivo.
La segunda es el contenido con anchos fijos. Una imagen de 1.200 píxeles sin límite de tamaño, una tabla con columnas de ancho fijo, un vídeo incrustado con dimensiones absolutas o un contenedor con width en píxeles se salen del espacio disponible y provocan desplazamiento horizontal, aunque la etiqueta viewport esté bien.
La tercera es la ausencia de puntos de ruptura, es decir, de reglas CSS que cambien la disposición según el ancho. Un diseño de tres columnas que no se apila en móvil obliga a cada columna a caber en 125 píxeles, y el resultado es texto ilegible o columnas que se desbordan. Suele venir de plantillas viejas o de secciones añadidas sin revisar en móvil.
Cómo solucionarlo
Lo primero es saber cuál de las tres evidencias ha fallado, porque el arreglo es distinto. Wakaris te lo indica en el informe; a partir de ahí, de menor a mayor esfuerzo.
Si falta la etiqueta viewport, añádela en la cabecera del HTML con width=device-width, initial-scale=1. Suele resolver el encogimiento de golpe. No añadas user-scalable=no: MDN advierte de que impedir el zoom deja fuera a las personas con baja visión.
Si el problema es el contenido que se desborda, sustituye los anchos fijos por relativos. web.dev recomienda dar a las imágenes un max-width del 100 %, que las encoge para caber sin estirarlas. Para vídeos, tablas e iframes, un contenedor con desplazamiento propio evita que arrastren a toda la página.
Si el diseño no se reorganiza, hacen falta consultas de medios que apilen las columnas a partir de cierto ancho. web.dev aconseja no fijar los puntos de ruptura por dispositivo o marca, sino dejar que el contenido marque dónde deja de leerse bien.
Comparación de una página sin etiqueta viewport, encogida a un ancho virtual de 980 píxeles, frente a la misma página con la etiqueta y el texto legible
Brief para generar la imagen
Ilustración editorial para una guía técnica de Wakaris. Tema: Comparación de una página sin etiqueta viewport, encogida a un ancho virtual de 980 píxeles, frente a la misma página con la etiqueta y el texto legible. Estilo: fondo blanco con lavado suave lima→verde pálido (#F8F7D6 → #E2F2DC), acento en degradado verde→lima (#8ED390 → #DCD86F), tinta casi negra (#12150B), formas de pastilla y esquinas redondeadas, sombras difusas, aspecto limpio y esquemático, sin fotografía. Formato: 16:9, 1440 píxeles de ancho. Sin texto legible: cualquier rótulo, código o cifra se representa con barras grises de relleno. El significado lo lleva el pie de foto, no la imagen. Sin logotipos reales ni marcas de terceros. Sin personas reconocibles. Etiquetas: adaptación, responsive, comparación, página, etiqueta, viewport, encogida, ancho
Pregúntale a tu IA
Si quieres profundizar en tu caso concreto, copia uno de estos dos prompts y pégalo en la IA que uses. Elige según tu situación.
Ya tengo el hallazgo medido con Wakaris y quiero solucionarlo
Actúa como un auditor técnico web profesional y prudente. Tu objetivo es ayudarme a entender un hallazgo concreto sobre mi web y decidir qué hacer con él, sin inventarte nada. Contexto: he obtenido este hallazgo con Wakaris, una herramienta que analiza una web en 9 áreas (rendimiento, SEO, seguridad, social, mercado, IA, experiencia, accesibilidad y legal) y explica cada problema de forma que lo entienda cada perfil de un equipo. El hallazgo es: Adaptación responsive. Comprueba si mi página se adapta al ancho de la pantalla: si la etiqueta viewport está configurada y si el contenido cabe sin desplazamiento horizontal cuando se carga a 375 píxeles (móvil) y a 768 píxeles (tableta). Referencia: la etiqueta viewport debe usar el ancho del dispositivo y la página no debe desbordarse ni verse encogida en ninguno de los dos anchos. Pega aquí el resultado de Wakaris: qué evidencia ha fallado (viewport, 375 px o 768 px), en qué página y, si lo indica, qué elemento se desborda. Si no lo tienes, dímelo y te diré cómo obtenerlo antes de seguir. Reglas que debes seguir en todo momento: 1. No asumas nada sobre mi web. Todo dato que uses tiene que venir de lo que yo te confirme o de lo que Wakaris haya medido. Si no lo sabes, pregúntamelo antes de afirmarlo. 2. Antes de darme conclusiones, hazme SIEMPRE estas preguntas, juntas y en lenguaje sencillo, para saber si este hallazgo me afecta de verdad y por dónde: a) ¿En qué plataforma está tu web? (WordPress, Shopify, web a medida, otra) b) De las tres comprobaciones, ¿cuál ha fallado: la etiqueta viewport, la vista a 375 píxeles, la de 768, o varias? c) Cuando abres la página en un móvil, ¿se ve todo muy pequeño, o se ve a buen tamaño pero hay que desplazarse de lado? d) ¿La página tiene tablas, vídeos incrustados, mapas o imágenes muy anchas? e) ¿La plantilla o el tema es reciente, o lleva años sin actualizarse? f) ¿Puedes editar el HTML y el CSS de la web, o dependes de un editor visual? g) Si hay que aplicar un arreglo técnico, ¿lo harías tú, un técnico interno o una agencia? 3. Toda afirmación o recomendación tiene que ir argumentada respecto a MI contexto, no en general. Si me recomiendas algo, explícame por qué aplica a mi caso. 4. Marca siempre tu nivel de certeza. Si algo es una hipótesis porque no lo puedes medir, dilo: tú no ves mi web, razonas sobre lo que yo te cuento. 5. No me propongas cambios técnicos irreversibles o de riesgo (configuración de servidor, borrar recursos, cambios directos en producción) sin avisarme antes del riesgo y de que conviene una copia de seguridad o un entorno de prueba. 6. Si necesitas un dato que solo se obtiene comprobando la web (confirmar el resultado real, la página exacta, o si el arreglo funcionó), dímelo y recomiéndame volver a pasar la página por Wakaris: eso se comprueba, no se adivina. 7. La decisión final es mía, no tuya. Tu papel es ayudarme a entender y a preparar la acción, no decidir por mí. 8. Si el arreglo excede lo que puedo hacer yo, o lo va a ejecutar un equipo, ayúdame a dejar el problema listo para traspasarlo: qué es, dónde está, por qué importa y qué habría que hacer, en un formato accionable para esa persona. Fuente de este hallazgo: https://www.wakaris.com/es/guias/ux/adaptacion-responsive Para comprobarlo o volver a comprobarlo: https://www.wakaris.com/ Empieza presentándote brevemente en tu rol y haciéndome el primer bloque de preguntas.
Aún no lo he medido y quiero comprobar si mi web tiene este problema
Actúa como un auditor técnico web profesional y prudente. Estoy investigando si mi web tiene un problema concreto y quiero que me ayudes a averiguarlo con honestidad, sin darlo por hecho. Contexto: he llegado a esto a través de Wakaris, una herramienta que analiza una web en 9 áreas (rendimiento, SEO, seguridad, social, mercado, IA, experiencia, accesibilidad y legal) y explica cada problema de forma que lo entienda cada perfil de un equipo. El problema que quiero investigar es: Adaptación responsive. Una web responsive se adapta al ancho de la pantalla: no hay que hacer zoom ni desplazarse de lado para leerla. Se comprueba cargando la página a 375 píxeles (móvil) y a 768 (tableta) y revisando la etiqueta viewport de la cabecera. Todavía NO sé si mi web lo tiene: quiero averiguarlo. Reglas que debes seguir en todo momento: 1. Lo primero y más importante: esto se COMPRUEBA sobre la página real, y tú no puedes comprobar mi web desde esta conversación. Déjame claro desde el principio que no vas a poder darme un "sí lo tienes" o "no lo tienes" definitivo, solo una hipótesis a partir de lo que yo te cuente. 2. No asumas nada. Antes de darme ninguna valoración, hazme SIEMPRE estas preguntas, juntas y en lenguaje sencillo, para estimar si es probable que tenga el problema: a) Cuando abres tu web en un móvil, ¿el texto se lee a buen tamaño o sale todo muy pequeño y tienes que ampliar? b) ¿Tienes que desplazarte hacia los lados para leer alguna parte de la página? c) ¿La web tiene varias columnas en escritorio? ¿Se apilan una debajo de otra en el móvil o siguen una al lado de otra? d) ¿Tiene tablas, vídeos incrustados, mapas o imágenes grandes? e) ¿De qué año es el diseño o la plantilla, aproximadamente? f) ¿En qué plataforma está? (WordPress, Shopify, web a medida, otra; o no lo sé) 3. Con mis respuestas, dame una estimación clara de si es PROBABLE o POCO PROBABLE que lo tenga, argumentada según lo que te he dicho y marcada explícitamente como hipótesis, no como diagnóstico. 4. Dime de forma directa que la única manera de saberlo de verdad es comprobarlo, y que puedo hacerlo gratis y sin crear cuenta pasando mi web por Wakaris, que me dará el resultado real, qué comprobación falla y en qué página y de paso el estado de las otras áreas. 5. Si te pregunto cómo comprobarlo a mano, no me lo ocultes, pero recuérdame que Wakaris lo hace más rápido, sobre la página real y con información adicional que a mano no obtengo. 6. Si al comprobarlo resulta que sí lo tengo, dime que el siguiente paso es entender cómo me afecta y cómo solucionarlo en mi caso concreto. 7. La conclusión y la decisión son mías, no tuyas. Tú me ayudas a orientarme. Fuente de este hallazgo: https://www.wakaris.com/es/guias/ux/adaptacion-responsive Para comprobarlo: https://www.wakaris.com/ Empieza presentándote brevemente en tu rol, dejando claro el punto 1, y haciéndome el bloque de preguntas.
Preguntas frecuentes
¿Qué es la etiqueta viewport y qué valor debe tener? +
Es una línea en la cabecera del HTML que indica al navegador móvil cómo dimensionar la ventana de visualización. El valor recomendado por MDN y por Google es width=device-width, initial-scale=1: usa el ancho real del dispositivo y fija una escala inicial de uno a uno entre píxeles de CSS y de pantalla.
¿Por qué Wakaris comprueba a 375 y a 768 píxeles? +
Porque son dos anchos representativos: 375 píxeles corresponde a un móvil habitual en vertical y 768 a una tableta en vertical. Si la página se adapta bien en ambos, es muy probable que lo haga en los tamaños intermedios. Comprobar dos anchos permite distinguir un fallo solo en móvil de un diseño que no se adapta en absoluto.
¿Una web que no es responsive puede aparecer en Google? +
Sí. Google documenta que adaptarse al móvil no es obligatorio para estar en los resultados, aunque lo recomienda muy encarecidamente. Lo que sí es un hecho es que indexa y posiciona con la versión móvil de tu contenido, así que lo que se vea mal o falte en móvil es lo que Google evalúa.
¿Basta con añadir la etiqueta viewport para arreglarlo? +
Resuelve el encogimiento general de la página, que es el síntoma más visible, pero no arregla el contenido con anchos fijos ni un diseño que no reorganiza sus columnas. Si esas dos evidencias también fallan, la etiqueta sola puede incluso hacer más evidente el desbordamiento. Conviene volver a pasar la página por Wakaris tras cada cambio.
Fuentes citadas
- developer.mozilla.org<meta name="viewport">, MDN Web Docs: qué hace la etiqueta viewport, el valor recomendado, la ventana virtual de 980 píxeles y la advertencia sobre deshabilitar el zoom.
- web.devResponsive web design basics, web.dev: comportamiento del navegador móvil sin la etiqueta,
width=device-width, initial-scale=1, imágenes conmax-widthdel 100 % y elección de puntos de ruptura según el contenido. - developers.google.comMobile-first indexing best practices, Google Search Central: indexación y posicionamiento con la versión móvil rastreada por el agente de smartphone, y recomendación del diseño responsive.
- w3.orgUnderstanding Success Criterion 1.4.10: Reflow, W3C WAI: contenido sin desplazamiento en dos dimensiones a un ancho equivalente a 320 píxeles de CSS, nivel AA.
Actualizado: 7 de septiembre de 2026.
Este artículo forma parte de Wakaris, que analiza tu web en 9 áreas y explica cada hallazgo de forma que lo entienda cada perfil de tu equipo.