Qué es Generador de metaetiquetas viewport?
La etiqueta meta viewport controla cómo una página se escala en navegadores móviles, siendo una de las etiquetas más importantes para el diseño responsivo. La etiqueta meta theme-color define el color del cromo del navegador en navegadores móviles y de escritorio que lo soportan. Las etiquetas link de Apple touch icon definen el icono que se muestra cuando un visitante guarda la página en la pantalla de inicio de iOS. Juntas, estas etiquetas forman la capa básica de presentación móvil que toda página HTML moderna debería incluir, pero cada una tiene una sintaxis específica que es fácil de equivocar.
Respuesta rápida
Use la etiqueta meta viewport para controlar cómo su página se escala en dispositivos móviles. El valor estándar width=device-width con initial-scale=1 funciona para casi todo sitio responsivo y garantiza texto legible sin necesidad de gestos de zoom.
Last updated: 2026-06-11
Limitaciones
- theme-color solo afecta el cromo del navegador en navegadores móviles compatibles. Los navegadores de escritorio y algunas configuraciones de navegador lo ignoran por completo.
- Las etiquetas Apple touch icon requieren un archivo de imagen PNG real en la ruta especificada. Una ruta faltante o incorrecta produce un icono roto silenciosamente en iOS.
- La etiqueta viewport controla la escala inicial pero no hace utilizable un diseño no responsivo en móvil. Debe combinarse con un diseño responsivo usando media queries de CSS.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Cómo usar esta herramienta
- Defina el ancho del viewport y la escala inicial. Los valores estándar son width=device-width e initial-scale=1.
- Ingrese un color theme como valor hexadecimal, por ejemplo #ffffff para blanco o un color que combine con el encabezado de su sitio.
- Ingrese la ruta a su archivo de Apple touch icon. Un PNG de 180 por 180 píxeles es el tamaño estándar.
- Copie todas las etiquetas generadas y péguelas en la sección head de su página HTML.
Para qué puedes usarla
- Configurar la etiqueta viewport móvil para una nueva página HTML estática antes del despliegue.
- Agregar meta etiquetas preparadas para PWA, incluyendo theme-color y Apple touch icons, para una experiencia de instalación en pantalla de inicio.
- Estandarizar las meta etiquetas móviles en una plantilla de sitio multipágina para que todas las páginas usen la misma configuración de viewport.