La etiqueta meta viewport es un elemento HTML <meta> colocado en el <head> de una página web que le dice a los navegadores móviles cómo establecer el ancho y el nivel de zoom inicial de la página. Sin ella, los navegadores móviles renderizan por defecto como si la pantalla midiera 980 píxeles de ancho, y luego encogen todo para que encaje. El resultado: texto de apenas 4 píxeles de alto, usuarios haciendo pinch para hacer zoom, y una marca "La página no parece optimizada para móvil" en cada auditoría de SEO y accesibilidad. La solución es una línea de HTML. Casi todos los themes modernos de WordPress la incluyen, pero muchos themes antiguos o personalizados aún la omiten.
¿Cómo se ve la etiqueta meta viewport y cuál es el valor correcto?
La etiqueta meta viewport estándar recomendada en 2026 es:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />Esto le dice al navegador dos cosas. Primero, establece el ancho del viewport de maquetación igual al ancho de la pantalla del dispositivo (en lugar del valor predeterminado heredado de 980px). Segundo, renderiza la página con zoom 1:1 en la carga inicial (en lugar de una vista previa reducida). Estos dos ajustes juntos son los que hacen que un layout CSS responsivo realmente se comporte de forma responsiva en teléfonos.
La etiqueta debe ir lo más arriba posible en <head>, idealmente directamente después de la declaración <meta charset>. Los navegadores la parsean temprano y la usan antes de maquetar cualquier otra cosa.
¿Por qué es necesaria la etiqueta meta viewport?
La razón de esto es histórica. Cuando se lanzó el iPhone en 2007, la web móvil no existía realmente. La mayoría de los sitios web estaban diseñados para monitores de escritorio de 1024 píxeles. La decisión de ingeniería de Apple: renderizar cada página como si el dispositivo midiera 980 píxeles de ancho, luego reducirla para que encajara en la pantalla de 320 píxeles. Los usuarios podían hacer pinch y zoom. Este era el peor predeterminado posible para sitios genuinamente conscientes de móvil, así que Apple introdujo una etiqueta meta a la que los sitios mobile-friendly podían suscribirse: width=device-width. La convención se extendió a todos los demás navegadores móviles, y 17 años después sigue siendo el mecanismo.
La implicación práctica para un sitio WordPress: si tu theme es responsivo (lo cual es esencialmente cualquier theme desde 2014), pero falta la etiqueta meta viewport, los navegadores no saben que tu CSS es responsivo. Aplican el fallback heredado de 980 píxeles, tus media queries nunca se activan, y el sitio parece roto en móvil aunque el CSS habría funcionado.
¿Cuáles son los parámetros de la etiqueta meta viewport?
El atributo content es una lista de parámetros separados por comas. Los dos esenciales cubren el 99% de los casos; los demás son situacionales.
width=device-width. Establece el viewport de maquetación para coincidir con el ancho de pantalla del dispositivo. Inclúyelo siempre. La alternativa es un valor fijo en píxeles (width=1024), que prácticamente nunca es la elección correcta para un sitio moderno.initial-scale=1.0. Establece el nivel de zoom cuando se carga la página por primera vez.1.0significa sin zoom (1 píxel CSS = 1 píxel de maquetación). Inclúyelo siempre. Sin él, algunos navegadores Android históricamente aplicaron niveles de zoom inesperados.minimum-scaleymaximum-scale. Establecen los límites para el pinch-to-zoom del usuario. Mejor dejarlos fuera. Restringir el zoom del usuario es una violación de accesibilidad bajo WCAG 2.1 (criterio de éxito 1.4.4 "Redimensionar texto") y Google lo considera un problema de usabilidad móvil. Los usuarios con baja visión dependen del zoom para leer el texto.user-scalable=no. Deshabilita el pinch-to-zoom por completo. Mismo problema de accesibilidad. Algunas single-page apps y sitios de juegos lo usan, pero para cualquier sitio dirigido por contenido (blog, tienda, página de marketing), perjudica activamente a los usuarios. Los navegadores modernos ignoranuser-scalable=noen Safari y Firefox específicamente para proteger la accesibilidad.viewport-fit=cover. Le dice a iOS que extienda el layout debajo del notch y el indicador de inicio en iPhone X y posteriores. Necesario si tienes un diseño full-bleed que debe llegar a los bordes de la pantalla. Si tu sitio tiene padding estándar alrededor del contenido, puedes ignorarlo.interactive-widget. Propiedad más nueva (2023+) que controla cómo interactúa el teclado virtual con el viewport. El comportamiento predeterminado está bien para la mayoría de los sitios.
¿Qué sale mal cuando falta la etiqueta meta viewport?
Cuatro síntomas, todos visibles inmediatamente en un teléfono:
- El texto es microscópico. Toda la página está comprimida en el ancho de la pantalla, así que el texto de cuerpo de 16px se renderiza con quizás 4-5px de píxeles reales. Los usuarios tienen que hacer pinch-zoom para leer.
- Aparece scroll horizontal. La página está maquetada a 980px de ancho en una pantalla de 390px, así que hay un desbordamiento horizontal significativo. Los usuarios deben desplazarse de lado además de hacia abajo.
- Los botones y enlaces son demasiado pequeños para tocar. Apple recomienda un objetivo táctil mínimo de 44x44 puntos. Reducidos por un factor de 2.5, se convierten en 17x17 píxeles reales, muy por debajo de lo que los dedos pueden tocar de forma fiable.
- Google Search Console marca la página. El reporte de Usabilidad Móvil muestra errores "Viewport no configurado" o "Contenido más ancho que la pantalla". Desde la indexación mobile-first (totalmente desplegada en 2021), Google indexa principalmente la versión móvil de tu sitio, y las páginas con problemas de usabilidad móvil pueden rankear más bajo.
¿Cómo verifico si mi sitio WordPress tiene una etiqueta meta viewport?
Cuatro formas, las más rápidas primero:
- Reporte InspectWP. La sección HTML marca si una etiqueta meta viewport está presente, qué valor tiene y si restringe el zoom del usuario.
- Ver código fuente de la página. Clic derecho en la página, "Ver código fuente" (o Cmd/Ctrl+U), busca "viewport". Deberías encontrar una etiqueta
<meta name="viewport">. Cero significa que falta. Dos o más significa que hay un conflicto en algún lugar de tu theme. - Emulación móvil de Chrome DevTools. Abre DevTools (F12), haz clic en el icono de la barra de herramientas de dispositivo. Si la página se renderiza alejada y diminuta en el preset de iPhone 14, la etiqueta meta viewport falta o es incorrecta.
- Google Search Console. Bajo "Experiencia de página, Usabilidad móvil", se listan explícitamente todas las páginas sin etiqueta viewport.
¿Cómo añado la etiqueta meta viewport en WordPress?
Tres escenarios, dependiendo de cómo esté construido tu theme:
El theme ya la incluye (la mayoría de los themes modernos)
Cada theme predeterminado de WordPress desde Twenty Fourteen (2013) incluye la etiqueta meta viewport correcta en su header.php. Los block themes (desde Twenty Twenty-Two en adelante) la incluyen automáticamente a través del editor. Casi todos los themes comerciales de Astra, GeneratePress, Kadence, Avada, Divi, Elementor Hello, etc. la incluyen. Verifica primero el código fuente: si ya está ahí, no hagas nada.
El theme no la incluye (themes antiguos o personalizados)
Añádela al header.php de tu theme, justo después de la línea <meta charset>:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />Si no quieres editar los archivos del theme (porque el theme no es tuyo, o para sobrevivir actualizaciones del theme), usa un child theme o añádela vía snippet en functions.php:
add_action('wp_head', function () {
echo '<meta name="viewport" content="width=device-width, initial-scale=1.0" />' . "\n";
}, 1);La prioridad 1 asegura que se emita muy temprano en el <head>. El comportamiento del navegador es más predecible cuando viewport es una de las primeras etiquetas.
Ves dos etiquetas viewport (conflicto)
Algunos plugins (plugins PWA estilo app móvil, plugins AMP, ciertos page builders) inyectan su propia etiqueta viewport. Si tu theme también emite una, terminas con dos, y los navegadores usan la primera que encuentran. Síntomas: la página a veces se renderiza correctamente y otras no, dependiendo de cuál cargó primero. Solución: identifica el duplicado (busca "viewport" en el HTML renderizado), luego desactiva el output incorrecto. Los ajustes del plugin generalmente tienen un toggle para suprimir su inyección de viewport.
¿Debería restringir el zoom del usuario para una UI estilo app?
Respuesta corta: no. La tentación viene de diseñadores que quieren que el sitio se sienta como una app nativa, donde el pinch-to-zoom no funciona. La realidad:
- Viola WCAG 2.1. El Criterio de Éxito 1.4.4 de las Pautas de Accesibilidad para el Contenido Web requiere que los usuarios puedan redimensionar el texto hasta 200% sin pérdida de funcionalidad. Restringir el zoom rompe esto.
- Perjudica a los usuarios con baja visión. Aproximadamente el 4% de los adultos tienen alguna forma de discapacidad visual que requiere zoom. Para ellos, tu página "estilo app" es ilegible.
- Los navegadores modernos ignoran la restricción de todas formas. Safari en iOS 10+ y Firefox han ignorado activamente
user-scalable=nodurante años específicamente por el daño a la accesibilidad. El ajuste solo funciona en una minoría decreciente de navegadores. - Daña el SEO. Los criterios mobile-friendly de Google incluyen explícitamente "la página no restringe el pinch-to-zoom". Las páginas que sí lo hacen son marcadas en Search Console.
Si tu UI se rompe cuando los usuarios hacen zoom, el arreglo correcto es hacer que el CSS maneje texto más grande con elegancia, no bloquear el zoom.
¿Cómo interactúa la etiqueta viewport con el diseño responsivo?
La etiqueta viewport y las media queries CSS trabajan juntas. La etiqueta viewport establece el viewport de maquetación (el ancho con el que se hacen los cálculos CSS); las media queries se disparan basándose en ese ancho. Sin width=device-width, tus media queries se evalúan contra el supuesto heredado de 980px, así que una regla @media (max-width: 768px) nunca se dispara en un iPhone de 390px (porque el navegador cree que el viewport de maquetación es de 980px de ancho).
Esta es la causa más común de "mi diseño responsivo no funciona" en un sitio WordPress: el CSS está bien, las media queries son correctas, pero la etiqueta viewport falta o es incorrecta, así que el navegador nunca entra en modo móvil. Añadir una línea de HTML lo arregla.
Errores comunes
- Usar un ancho fijo como
width=1024. Fuerza a cada dispositivo a renderizar a 1024px, derrotando el propósito entero. Casi siempre un error de copy-paste de un tutorial desactualizado. - Establecer
initial-scalea algo distinto de 1.0. Valores como0.5o2.0significan que la página carga pre-acercada o alejada. Los usuarios inmediatamente intentan hacer zoom de vuelta a normal. Siempre 1.0. - Restringir el zoom con
user-scalable=noomaximum-scale=1. Violación de accesibilidad, penalización SEO, ignorado por Safari y Firefox modernos de todos modos. Simplemente elimínalo. - Olvidar
viewport-fit=coveren diseños full-bleed de iPhone X+. El contenido no llega a los bordes de la pantalla; obtienes bandas blancas arriba y abajo alrededor del notch y el indicador de inicio. Añade el parámetro si el diseño busca edge-to-edge. - Añadir la etiqueta con PHP
echofuera del<head>. Una etiqueta en<body>es HTML inválido y los navegadores la ignoran. La etiqueta debe estar dentro de<head>.
Qué verifica InspectWP
La sección HTML de cada reporte InspectWP verifica que esté presente una etiqueta meta viewport y reporta su valor de contenido. Si falta la etiqueta, el reporte la marca como advertencia ya que es un prerrequisito casi universal de usabilidad móvil. Si user-scalable=no o maximum-scale está configurado para restringir el zoom, eso se marca como un problema de accesibilidad. La verificación es independiente de si el diseñador del theme pretendía un layout responsivo; lo que importa es si la etiqueta está realmente presente en el HTML que ve el navegador. Un sitio puede tener un framework CSS responsivo perfecto y aún fallar esta verificación si la etiqueta viewport se perdió durante una migración de theme o un conflicto de plugins.