Docs ejecutables de HTML: Meta viewport

Q: ¿Cuál es la etiqueta meta viewport estándar?

, colocada en . Es la opción correcta para casi cualquier página responsive.

Q: ¿Por qué no funciona mi meta viewport?

Comprueba que la etiqueta está en , que name es viewport y que los valores van separados por comas. Si la página sigue desplazándose hacia los lados, algún elemento es más ancho que la pantalla, como un ancho fijo, una imagen grande o una palabra larga; la etiqueta no puede arreglar un CSS más ancho que el dispositivo.

La etiqueta que hay que usar

Pon esta línea en el <head> de todas las páginas:

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width hace que el diseño sea tan ancho como la pantalla, e initial-scale=1 abre la página al 100% de zoom. Es todo lo que necesita la mayoría de los sitios. Una página completa con la etiqueta en su sitio:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Viewport</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <h1>Hello, phone</h1>
  <p id="out"></p>
  <script>
    const meta = document.querySelector('meta[name="viewport"]');
    document.getElementById('out').textContent =
      'Viewport tag: "' + meta.content + '". Layout width here: ' + innerWidth + 'px.';
  </script>
</body>
</html>

El script lee la etiqueta y el ancho del diseño. Los navegadores de escritorio ignoran la etiqueta viewport, así que en esta vista previa el ancho es simplemente el de la caja de la vista previa. En un teléfono, el mismo archivo informa del ancho del teléfono (normalmente de 360 a 430 píxeles CSS) gracias a la etiqueta.

Qué hacen los teléfonos sin ella

Un navegador móvil que no encuentra la etiqueta viewport supone que la página se hizo para escritorio. Diseña la página con unos 980 píxeles de ancho y luego la reduce entera para que quepa en la pantalla. Los dos teléfonos simulados de abajo cargan la misma página, uno diseñado a 980px y otro a un ancho de teléfono, ambos escalados al mismo tamaño:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>With and without</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .phones { display: flex; gap: 24px; flex-wrap: wrap; }
    figure { margin: 0; width: 180px; }
    .phone { width: 180px; height: 320px; overflow: hidden; border: 6px solid #111827; border-radius: 16px; }
    iframe { border: 0; transform-origin: 0 0; background: #fff; }
    figcaption { font-size: 13px; margin-top: 6px; }
  </style>
</head>
<body>
  <div class="phones">
    <figure>
      <div class="phone"><iframe id="without" title="Page at 980px"></iframe></div>
      <figcaption>No viewport tag: laid out at 980px, shrunk</figcaption>
    </figure>
    <figure>
      <div class="phone"><iframe id="with" title="Page at 375px"></iframe></div>
      <figcaption>With the tag: laid out at 375px</figcaption>
    </figure>
  </div>
  <script>
    const page = `<style>
      body { font: 16px system-ui, sans-serif; margin: 12px; }
      .cols { display: flex; gap: 12px; }
      .cols div { flex: 1; background: #dbeafe; padding: 12px; }
      @media (max-width: 600px) { .cols { flex-direction: column; } }
    </style>
    <h1>My site</h1>
    <p>This paragraph is set at 16px, a comfortable size to read.</p>
    <div class="cols"><div>Column one</div><div>Column two</div></div>`;
    function show(id, layoutWidth) {
      const frame = document.getElementById(id);
      const scale = 180 / layoutWidth;
      frame.width = layoutWidth;
      frame.height = Math.round(320 / scale);
      frame.style.transform = 'scale(' + scale + ')';
      frame.srcdoc = page;
    }
    show('without', 980);
    show('with', 375);
  </script>
</body>
</html>

En el primer teléfono, el texto de 16px acaba diminuto y el lector tiene que pellizcar para hacer zoom. En el segundo se sigue leyendo, y las columnas se apilan porque la regla @media (max-width: 600px) coincide. Ese es el segundo trabajo de la etiqueta: las media queries ven el ancho del diseño, así que sin la etiqueta un teléfono informa de 980px y tus estilos para móvil nunca se aplican. Cambia 375 por 980 en show('with', 375) y los dos teléfonos se verán igual.

La etiqueta es la mitad del trabajo

La etiqueta viewport te da un diseño estrecho; tu CSS tiene que caber en él. Un solo elemento con un ancho fijo mayor que la pantalla hace que toda la página se desplace hacia los lados:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Fitting the width</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .screen { width: 300px; border: 2px solid #111827; padding: 8px; margin-bottom: 12px; overflow-x: auto; }
    .banner { background: #f59e0b; height: 60px; }
    .fixed { width: 480px; }
    .fluid { max-width: 100%; width: 480px; }
  </style>
</head>
<body>
  <p>A 300px wide screen:</p>
  <div class="screen"><div class="banner fixed">width: 480px</div></div>
  <div class="screen"><div class="banner fluid">max-width: 100%</div></div>
</body>
</html>

La primera caja se desplaza hacia los lados; la segunda se encoge para caber. Dale max-width: 100% a las imágenes y a otros elementos anchos, y prefiere anchos flexibles (porcentajes, fr, flexbox) a anchos fijos en píxeles.

Valores de viewport

Valor	Ejemplo	Qué hace
`width`	`width=device-width`	Ancho del diseño. `device-width` es el ancho de la pantalla en píxeles CSS; también se admite un número, pero rara vez es buena idea.
`initial-scale`	`initial-scale=1`	Nivel de zoom al abrir la página.
`minimum-scale` / `maximum-scale`	`maximum-scale=5`	Límites de zoom. Un máximo bajo bloquea el zoom, así que omite `maximum-scale`.
`user-scalable`	`user-scalable=yes`	Si se permite el zoom con los dedos. Omítelo.
`viewport-fit`	`viewport-fit=cover`	Permite que la página se extienda bajo un notch o esquinas redondeadas, junto con un padding `env(safe-area-inset-*)`.
`interactive-widget`	`interactive-widget=resizes-content`	Cómo afecta el teclado en pantalla al diseño. Lo admite Chrome en Android.

Los valores van separados por comas. Una página que ocupa toda la pantalla en teléfonos con notch se ve así:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<style>
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
</style>

No bloquees el zoom

Encontrarás esta etiqueta en plantillas antiguas:

<!-- Avoid: stops people from zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Impide el zoom con los dedos, del que dependen las personas con baja visión, y las herramientas de accesibilidad como Lighthouse la señalan. Safari en iOS ignora user-scalable=no, así que la etiqueta ni siquiera funciona de forma coherente. Si un campo de formulario hace zoom al tocarlo en un iPhone, la causa es un tamaño de letra inferior a 16px en el input; pon el font-size del input en al menos 16px en lugar de desactivar el zoom.

Errores comunes

Olvidar la etiqueta. Una hoja de estilos responsive no hace nada en los teléfonos sin ella, porque las media queries ven un diseño de 980px. Ponla junto a la etiqueta title en la plantilla de tu página.
Punto y coma entre valores. Usa comas: width=device-width, initial-scale=1.
Fijar un ancho como width=375. Las pantallas varían; usa device-width.
Desactivar el zoom con user-scalable=no o maximum-scale=1.
Culpar a la etiqueta del desplazamiento lateral. Busca el elemento que es más ancho que la pantalla y dale un ancho flexible.

Preguntas frecuentes

¿Qué hace la etiqueta meta viewport?

Les dice a los navegadores móviles qué ancho debe tener el diseño. Sin ella, la mayoría de los teléfonos diseñan la página a unos 980 píxeles CSS y la reducen para que quepa en la pantalla. Con width=device-width el diseño coincide con el ancho de la pantalla, así que el texto se lee y las media queries funcionan.

¿Cuál es la etiqueta meta viewport estándar?

<meta name="viewport" content="width=device-width, initial-scale=1">, colocada en <head>. Es la opción correcta para casi cualquier página responsive.

¿Por qué no funciona mi meta viewport?

Comprueba que la etiqueta está en <head>, que name es viewport y que los valores van separados por comas. Si la página sigue desplazándose hacia los lados, algún elemento es más ancho que la pantalla, como un ancho fijo, una imagen grande o una palabra larga; la etiqueta no puede arreglar un CSS más ancho que el dispositivo.

¿Debo usar user-scalable=no o maximum-scale=1?

No. Los dos impiden que la gente haga zoom, algo de lo que dependen muchos usuarios con baja visión, y no pasan las auditorías de accesibilidad. Safari en iOS ignora user-scalable=no de todos modos.

¿La etiqueta meta viewport afecta a los navegadores de escritorio?

No. Los navegadores de escritorio la ignoran; ahí el ancho del diseño es simplemente el ancho de la ventana. La etiqueta importa en teléfonos y tabletas.

Conceptos relacionados