Generador de etiqueta meta viewport para webs responsivas

Elija device-width para la declaración estándar adaptada a móviles o indique un ancho numérico positivo para un viewport fijo deliberado, y defina después la escala inicial. El resultado contiene una etiqueta HTML completa lista para copiar en el head del documento, el valor de content y parámetros normalizados útiles en scripts, plantillas, pruebas y procesos de compilación automatizados.

Elija el ancho del viewport de forma consciente

Una declaración viewport indica al navegador móvil cómo debe relacionarse el viewport de maquetación de la página con la pantalla. En la mayoría de los sitios responsivos, device-width es el valor apropiado porque sigue el ancho del dispositivo en píxeles CSS y permite que las media queries respondan al espacio disponible. Este generador también admite un ancho numérico positivo cuando realmente se necesita un viewport fijo y controlado, por ejemplo, en una interfaz integrada antigua, una prueba reproducible del navegador o un ensayo de compatibilidad. Escriba el número sin el sufijo px: 375 es válido, mientras que 375px no es un valor de ancho válido en esta declaración. Se rechazan cero, valores negativos, entradas vacías, valores no finitos y palabras arbitrarias, en lugar de insertarlos en un marcado que parece correcto pero no expresa la configuración solicitada. El ancho devuelto queda normalizado, por lo que un texto numérico como 375 se convierte en el fragmento estable width=375. Así, un resultado correcto siempre contiene la palabra clave estándar exacta o un número positivo, sin correcciones ocultas ni suposiciones dependientes del navegador.

Defina la escala inicial y copie la etiqueta

La escala inicial controla el nivel de zoom cuando la página se carga por primera vez. El valor 1 es la opción convencional: un píxel CSS corresponde a un píxel CSS del viewport antes de que el usuario amplíe la página. El campo usa 1 de manera predeterminada, aunque puede indicar otro número finito positivo para una prueba o aplicación concreta. El generador valida ese ajuste por separado y conserva su significado numérico en una forma textual estable. Después produce una etiqueta completa como <meta name="viewport" content="width=device-width, initial-scale=1">. Colóquela dentro del head del documento, preferiblemente una sola vez, en lugar de añadir varias declaraciones viewport cuya interacción puede variar entre navegadores. La respuesta también muestra la cadena content y los campos normalizados width e initial_scale. Utilice meta_tag al escribir HTML, content cuando un framework solo espere ese atributo y los campos individuales para comprobar la configuración en pruebas. Ninguna solicitud de red, inspección de página ni detección del agente de usuario altera el resultado: una entrada idéntica siempre produce una salida idéntica en el navegador y mediante la API.

Sepa qué opciones no añade el generador

Esta capacidad genera deliberadamente solo width e initial-scale. No añade maximum-scale, minimum-scale, user-scalable, viewport-fit, interactive-widget ni otras directivas opcionales, porque esos valores exigen decisiones de producto y accesibilidad, no valores predeterminados automáticos. En particular, limitar el zoom puede dificultar el uso a personas que necesitan ampliar el contenido, por lo que un generador breve no debe introducir esa conducta en silencio. La herramienta tampoco audita una página existente, detecta etiquetas duplicadas, prueba breakpoints responsivos ni demuestra que el CSS sea adaptable. Crea marcado determinista a partir de los dos ajustes proporcionados. Tras añadirlo, revise la página en tamaños estrechos y anchos, confirme que el texto siga siendo legible, compruebe que los controles no se desborden y pruebe el zoom en navegadores reales. En proyectos con plantillas, conserve la declaración en el componente head compartido para aplicar la misma política a todas las rutas. El uso interactivo es gratuito en el navegador; una solicitud automatizada a la API cuesta $0.002. El mismo solucionador puro atiende ambos canales, de modo que una etiqueta probada manualmente puede pasar a un script sin modificar su formato ni sus reglas de validación.