Idiomas

Etiqueta meta viewport

Qué hace la etiqueta meta viewport, por qué hace que el diseño responsive funcione en móviles, la configuración correcta, la referencia de atributos y los errores comunes.

Publicado por primera vez: 2 jul 2026 · Última actualización: 3 ago 2026 · Avanzado
Idiomas
AIEscrito porAI v2

La etiqueta meta viewport — <meta name="viewport" content="width=device-width, initial-scale=1"> — indica al navegador que ajuste el tamaño del viewport de diseño al ancho del dispositivo en píxeles CSS en lugar del fallback heredado de ~980px que usan algunos navegadores móviles. Sin ella, los teléfonos pueden renderizar la página con ese ancho mayor y reducirla, produciendo texto diminuto, desplazamiento horizontal y breakpoints responsive que pueden no aplicarse como se espera. No es un factor de ranking en sí mismo, pero su presencia es una de las cosas que Google documenta como indicador de compatibilidad móvil, y su ausencia es un fallo clásico de usabilidad móvil. Nunca fuerces user-scalable=no ni un maximum-scale restrictivo: incumple la regla de conformidad de accesibilidad del W3C para el zoom y puede bloquear a usuarios con baja visión, aunque los navegadores pueden anularlo (iOS 10+ lo ignora por defecto). Pruébalo con Lighthouse o PageSpeed Insights: el informe de Usabilidad Móvil de Search Console y la prueba de Compatibilidad Móvil se retiraron el 1 de diciembre de 2023.

TL;DR — La etiqueta meta viewport — <meta name="viewport" content="width=device-width, initial-scale=1"> — sugiere al navegador que ajuste el viewport de diseño al ancho del dispositivo en píxeles CSS en lugar del respaldo heredado de ~980px que usan algunos navegadores móviles, lo que permite que las consultas de medios CSS responsivas se evalúen según el ancho real del dispositivo en móvil. Si falta o está mal configurada, es un fallo clásico de usabilidad móvil (texto diminuto, desplazamiento horizontal). No es un factor de ranking — Google documenta su presencia como una de las cosas que su evaluación de compatibilidad móvil comprueba, y nada más que eso. Nunca fuerces user-scalable=no / maximum-scale restrictivo: eso incumple la regla de accesibilidad ACT del W3C para el zoom, aunque existen anulaciones del navegador (iOS 10+ lo ignora por defecto). Google y Bing recomiendan la misma etiqueta. Prueba con Lighthouse / PageSpeed Insights — el informe de Usabilidad Móvil de Search Console y la Prueba de Compatibilidad Móvil se retiraron el 1 de diciembre de 2023.

Evidence for this claim The viewport meta tag lets authors control viewport width and scaling so responsive layouts render at device width. Scope: Browser viewport behavior. Confidence: high · Verified: MDN: Viewport meta tag Evidence for this claim Pages should not disable browser zoom because users must be able to enlarge content for accessibility. Scope: WCAG resize-text requirement and viewport guidance. Confidence: high · Verified: W3C WAI: Understanding Resize Text

El problema que resuelve: el viewport virtual de ~980px

Para entender la etiqueta, tienes que entender qué está anulando. Cuando los navegadores móviles eran nuevos, la falta de una etiqueta viewport significaba que algunos de ellos recurrían a un ancho de diseño fijo de aproximadamente 980px y renderizaban a ese tamaño — una acomodación deliberada para que los sitios de tamaño de escritorio, anteriores a los responsivos, no se rompieran por completo en los primeros teléfonos inteligentes. El navegador luego escalaba el resultado hacia abajo para ajustarse a la pantalla física. El propio marco de MDN: “If the site isn’t designed to work well on small viewports and this tag is omitted, some mobile browsers render the site using a fixed initial containing block width, typically 980px.” (traducción) «Si el sitio no está diseñado para funcionar bien en viewports pequeños y esta etiqueta se omite, algunos navegadores móviles renderizan el sitio usando un ancho de bloque contenedor inicial fijo, típicamente 980px.» — es un respaldo específico del navegador, no una constante universal de la especificación.

La consecuencia, en palabras de Google: “Without a viewport meta tag, mobile devices render pages at typical desktop screen widths and then scale the pages down, making them difficult to read.” (traducción) «Sin una etiqueta meta viewport, los dispositivos móviles renderizan las páginas a anchos típicos de pantalla de escritorio y luego las escalan hacia abajo, lo que dificulta su lectura.» Obtienes texto ilegible, zoom forzado con pellizco y desplazamiento horizontal — los síntomas clásicos de una página marcada como “no compatible con móviles”.

Configurar la etiqueta “lets you control the width and scaling of the viewport so that it’s sized correctly on all devices.” (traducción) «te permite controlar el ancho y la escala del viewport para que se ajuste correctamente en todos los dispositivos.»

Viewport de diseño vs. viewport visual (bajo el capó)

Hay dos “viewports” en juego, y vale la pena mantenerlos claros:

  • El viewport de diseño es el área donde la página se distribuye y a la que se adhieren los elementos de posición fija. width=device-width lo establece al ancho de pantalla del dispositivo en píxeles CSS.
  • El viewport visual es lo que el usuario está viendo actualmente — que cambia cuando hacen zoom con pellizco. El zoom cambia el viewport visual sin cambiar el viewport de diseño.

La razón por la que esto importa para SEO y CSS: tus consultas de medios responsivas (@media (max-width: 600px) y similares) se evalúan contra el viewport de diseño. Si el viewport de diseño está atascado en un respaldo heredado de ~980px porque no hay etiqueta viewport, un teléfono puede coincidir con tus puntos de interrupción de escritorio en lugar de los estrechos. MDN lo dice claramente: “Without it, your responsive design with breakpoints and media queries may not work as intended on mobile browsers.” (traducción) «Sin ella, tu diseño responsivo con puntos de interrupción y consultas de medios puede no funcionar como se espera en navegadores móviles.» La etiqueta es lo que hace que device-width sea el viewport de diseño para que tus puntos de interrupción previstos se evalúen correctamente.

Evidence for this claim Without an appropriate viewport hint, narrow responsive breakpoints may not match as intended against the wider virtual layout viewport; it is too absolute to say CSS media queries never fire. Scope: production HTML and HTTP responses Confidence: high · Verified: Responsive web design

La etiqueta correcta, y dónde va

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- ...the rest of your head... -->
</head>

Colócala en la parte alta del <head>, cerca de charset, antes de las etiquetas dependientes del contenido. Este es el valor que Google, Bing y Lighthouse recomiendan — textualmente, es la corrección que el propio Lighthouse sugiere. No pienses demasiado el valor: width=device-width, initial-scale=1 es la respuesta para prácticamente cualquier sitio responsivo.

Referencia de atributos

El atributo content es una lista de directivas separadas por comas. MDN es la referencia canónica atributo por atributo; esto es lo que hace cada uno:

DirectivaQué haceNotas
widthControla el ancho (mínimo) en píxeles del viewportUn número entero del 1 al 10000, o el valor especial device-width (el ancho de pantalla en píxeles CSS). Usa device-width.
initial-scaleLa relación de zoom entre el ancho del dispositivo y el viewport al cargarUn número 0.0–10.0. Usa 1.
minimum-scaleEl nivel de zoom mínimo permitidoDebe ser ≤ maximum-scale. iOS 10+ lo ignora por defecto.
maximum-scaleEl zoom de acercamiento máximo permitidoDebe ser ≥ minimum-scale. iOS 10+ lo ignora por defecto. No lo restrinjas.
user-scalableSi el usuario puede hacer zoom (yes/no, por defecto yes)iOS 10+ lo ignora por defecto. Establecer no es un antipatrón de accesibilidad: déjalo.
interactive-widgetCómo afecta la interfaz interactiva (p. ej., teclados virtuales) al viewportValores: resizes-visual (por defecto), resizes-content, overlays-content. Más reciente; la mayoría del contenido SEO lo omite.
viewport-fitCómo maneja el viewport los recortes de pantalla (muescas)Valores: auto (por defecto), contain (se ajusta dentro del rectángulo más grande que evita el recorte), cover (llena la pantalla: combínalo con las variables CSS env() de área segura para que el contenido no quede debajo del recorte).

viewport-fit e interactive-widget son ambos casos límite del diseño del navegador — manejo de recortes de pantalla y teclados virtuales, respectivamente — no directivas SEO; la mayoría de las guías centradas en SEO los omiten por completo.

Un detalle pequeño pero real de la propia documentación de Lighthouse: establecer initial-scale por debajo de 1 puede activar un comportamiento heredado de doble toque para hacer zoom que añade retraso en la interacción — otra razón para ceñirse a initial-scale=1 en lugar de complicarse.

Nunca deshabilites el zoom: user-scalable=no es un antipatrón

Todavía encontrarás user-scalable=no (o maximum-scale=1) copiado y pegado en plantillas antiguas de temas, normalmente de un desarrollador que no quería que el zoom con pellizco “estropeara” su diseño. Está mal por dos motivos:

  1. Falla la propia prueba de conformidad de accesibilidad web para el zoom y va en contra de la intención de WCAG. La regla ACT del W3C “Meta viewport allows for zoom” (regla b4f0c3) se aplica a cualquier etiqueta de viewport que establezca user-scalable o maximum-scale, y su expectativa es explícita: la etiqueta no debe establecer user-scalable=no, y maximum-scale no debe establecerse por debajo de 2. (La regla incluye supuestos declarados: no se aplica si la página no tiene contenido visible, ofrece otra forma de redimensionar el texto o nunca necesita refluir más allá de un área de 320×256 píxeles CSS, pero una página responsive típica no cumple esas excepciones). Según MDN: “Disabling zooming capabilities by setting user-scalable to a value of no prevents people experiencing low vision conditions from being able to read and understand page content. Additionally, WCAG requires a minimum of 2× scaling; however, the best practice is to enable a 5× zoom.” (traducción) «Deshabilitar las capacidades de zoom estableciendo user-scalable en un valor de no impide que las personas con problemas de visión puedan leer y comprender el contenido de la página. Además, WCAG exige un escalado mínimo de 2×; sin embargo, la mejor práctica es habilitar un zoom de 5×.» Bloquear el zoom excluye exactamente a los usuarios que más lo necesitan.
  2. También es específico del navegador, no universal. iOS Safari 10 y versiones posteriores ignoran user-scalable=no y los maximum-scale restrictivos por defecto: eso es una anulación de iOS, no un cambio en la regla ACT ni en la intención de WCAG. Así que en una gran parte del tráfico móvil el ajuste no logra nada, mientras que en navegadores que sí todavía lo respetan (WebViews de Android antiguas, algunos navegadores dentro de aplicaciones) falla activamente la prueba de accesibilidad anterior. Cero ventajas, desventajas reales — y no trates “iOS lo ignora” como prueba de que el marcado es accesible en todas partes.
Evidence for this claim `user-scalable=no` and `maximum-scale` below 2 fail the cited ACT rule's expectation under its assumptions, and disabling zoom harms low-vision users; an automated ACT failure is not by itself a complete universal WCAG conformance determination. Scope: production HTML and HTTP responses Confidence: high · Verified: Viewport meta tag

La regla es simple: no toques el zoom. width=device-width, initial-scale=1 y nada más.

¿Es un factor de ranking?

Sé preciso aquí, porque mucho contenido SEO lo exagera. Esto es exactamente lo que Google documenta, y dónde está la línea con la inferencia de la industria.

Lo que documenta Google: la etiqueta viewport no es un factor de clasificación directo. El propio documento de Google sobre metaetiquetas compatibles dice claramente que “la presencia de esta etiqueta indica a Google que la página es compatible con dispositivos móviles” — esa es toda la afirmación documentada: la presencia indica compatibilidad con dispositivos móviles. Google no documenta la etiqueta como puntuada, como garantía de renderizado, ni como prueba de que el diseño responsive de una página sea realmente bueno.

Evidence for this claim Google documents that viewport-meta presence indicates a page is mobile friendly, but that statement does not establish that the tag itself is a ranking factor, a display guarantee or sufficient evidence of responsive quality. Scope: production HTML and HTTP responses Confidence: high · Verified: Meta tags and attributes that Google supports

Dónde los profesionales conectan los puntos (inferencia de la industria, no una cita de Google): una etiqueta viewport faltante o mal configurada es una causa raíz común de los fallos de usabilidad móvil (texto diminuto, desplazamiento horizontal, objetivos táctiles inutilizables) que los especialistas en SEO generalmente entienden que degradan la experiencia de página móvil. Esa conexión es razonable y ampliamente aceptada en la industria, pero es una inferencia de los profesionales sobre por qué importa la etiqueta — no algo que los documentos de Google establezcan como una cadena de clasificación.

Así que el marco honesto: la etiqueta en sí no se puntúa, y arréglala porque una página sin ella se renderiza mal en los teléfonos — no porque Google la documente como una palanca de clasificación, directa o indirecta. Mantén esto separado también de la indexación mobile-first: eso es un concepto distinto de Google Search sobre qué versión de tu página usa Google principalmente para indexar y clasificar; la etiqueta viewport trata sobre cómo se renderiza ese HTML móvil en un navegador, y punto.

Evidence for this claim Mobile-first indexing means Google primarily uses the mobile content for indexing and ranking; it is a separate Google Search concept from the browser's viewport rendering contract. Scope: production HTML and HTTP responses Confidence: high · Verified: Mobile-first indexing best practices

Cómo probarlo: las herramientas cambiaron en 2023

Aquí es donde la mayoría de las guías antiguas están desactualizadas. El 1 de diciembre de 2023, Google retiró el informe de Usabilidad Móvil de Search Console, la herramienta Mobile-Friendly Test y la API Mobile-Friendly Test (anunciado en abril de 2023, confirmado como completo ese diciembre). El razonamiento de Google fue que otras herramientas habían madurado — “muchos otros recursos sólidos para evaluar la usabilidad móvil han surgido, incluido Lighthouse de Chrome.” Así que si un tutorial te dice que abras Search Console → Usabilidad Móvil para comprobar tu viewport, ese informe ya no existe.

Combina estas comprobaciones en lugar de depender de una sola herramienta: confirma que la etiqueta existe en el HTML servido en bruto (no solo después de que se ejecute JavaScript), confirma que tus puntos de interrupción responsive realmente se aplican en anchos de teléfono, prueba hacer zoom al 200 % sin que el diseño se rompa (el comportamiento de redimensionamiento en torno al cual se construye la intención de WCAG), y haz comprobaciones puntuales en más de un navegador — una comprobación solo en Safari de iOS puede ocultar un error de restricción de zoom que Android o los navegadores dentro de aplicaciones aún aplican.

Tu kit de herramientas actual:

  • Lighthouse (en Chrome DevTools). La auditoría relevante históricamente decía “No tiene una etiqueta <meta name="viewport"> con width o initial-scale” — falla a menos que el <head> tenga una meta name="viewport" cuyo content incluya width=. A partir de Lighthouse 13 se integra en la información “Optimizar viewport para móvil”.
  • PageSpeed Insights — ejecuta Lighthouse más datos de campo de Core Web Vitals.
  • Barra de dispositivos de Chrome DevTools — emula dimensiones de teléfono y échale un vistazo.
  • Herramienta de prueba de compatibilidad móvil de Bing — Bing también comprueba la configuración de viewport y control de zoom, y recomienda la misma etiqueta que Google.
  • Ver código fuente / comprobación en dispositivo real — a veces la prueba más rápida es simplemente mirar el <head> en tu teléfono.

Errores comunes

  • Sin etiqueta en absoluto (“viewport no establecido”) — la página se renderiza con el ancho heredado tipo escritorio y se encoge.
  • Un ancho de píxeles fijo como width=1024 en lugar de device-width — existe una etiqueta, pero aún así no ajusta la página al dispositivo. Tanto Lighthouse como la compatibilidad móvil real quieren un valor width= utilizable, no solo cualquier etiqueta.
  • initial-scale por debajo de 1 — puede activar el retraso heredado del doble toque para hacer zoom.
  • user-scalable=no / maximum-scale restrictivo — copiado y pegado de plantillas antiguas; patrón anti-accesibilidad, ignorado en iOS de todos modos.

Para ver dónde encaja esto en el trabajo móvil más amplio (configuración, paridad de contenido, velocidad), consulta el centro de SEO móvil, la lista de verificación de SEO móvil y la indexación mobile-first. Para la etiqueta en sí como parte de la familia más amplia de etiquetas on-page, el clúster de metaetiquetas es el mapa.

Add an expert note

Pin an expert quote

New person? Create their unclaimed profile at /admin/experts/ → Pin a quote first.