Categoría: Desarrollo
Generador de meta tag Viewport
Genera un meta tag de viewport responsivo y comprende sus opciones
Configura el ancho, la escala inicial, los límites de zoom, el permiso de zoom con pellizco y el viewport-fit del meta tag de viewport de tu página, con una breve explicación de cada opción, y copia el tag final en tu <head>. Todo se genera localmente en tu navegador.
Desactivar esta opción bloquea el zoom con pellizco, lo que perjudica la accesibilidad; la mayoría de los sitios deberían dejarla activada.
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
Todo lo de esta página se procesa en tu navegador. No se sube nada.
Para qué sirve
El meta tag de viewport le indica a un navegador móvil cómo dimensionar y escalar una página; sin él, los teléfonos renderizan las páginas con un ancho fijo tipo escritorio y las alejan con zoom, por lo que es una de las primeras cosas que revisa un comprobador de compatibilidad móvil. Configurar width=device-width e initial-scale=1 cubre el caso habitual, pero vale la pena entender las opciones de límites de escala y viewport-fit en lugar de copiarlas y pegarlas a ciegas, ya que desactivar el zoom por completo es un problema de accesibilidad para usuarios con baja visión.
Cómo se usa
- Deja width como "device-width" a menos que tengas un motivo específico para cambiarlo.
- Establece una escala inicial y, opcionalmente, límites de zoom mínimo/máximo.
- Decide si permitir el zoom con pellizco; se recomienda dejarlo activado.
- Elige un valor de viewport-fit si tu diseño necesita llegar hasta las zonas de notch o safe-area.
- Copia el tag generado en el <head> de tu página.
Privacidad
Esta herramienta funciona íntegramente en tu navegador. Lo que introduces nunca se sube, se guarda ni se comparte: al cerrar la pestaña desaparece.
Preguntas frecuentes
- ¿Debería desactivar user-scalable para evitar zoom "accidental"?
- En general no: bloquear el zoom con pellizco impide que los visitantes con baja visión amplíen para leer tu contenido, algo que señalan las pautas de accesibilidad (WCAG 1.4.4). Corrige los problemas de diseño en lugar de desactivar el zoom.
- ¿Qué hace exactamente viewport-fit=cover?
- En dispositivos con notch o esquinas redondeadas, permite que el fondo de tu página se extienda hasta esas zonas de safe-area en lugar de dejar una barra negra, mientras usas las funciones CSS env(safe-area-inset-*) para mantener el contenido en sí fuera del notch.
- ¿width=device-width es siempre correcto?
- Para la gran mayoría de sitios responsivos, sí: hace que el viewport CSS coincida con el ancho natural del dispositivo para que tus puntos de ruptura responsivos se comporten de forma predecible.