Gerador de meta tag viewport para sites responsivos

Escolha device-width para a declaração padrão compatível com dispositivos móveis ou informe uma largura numérica positiva para um viewport fixo intencional e, em seguida, defina a escala inicial. O resultado inclui uma tag HTML completa pronta para ser copiada para o head do documento, o valor de content e configurações normalizadas úteis em scripts, modelos, testes e pipelines automatizados de build.

Escolha a largura do viewport com intenção

Uma declaração de viewport informa ao navegador móvel como o viewport de layout da página deve se relacionar com a tela. Para a maioria dos sites responsivos, device-width é a configuração adequada, pois acompanha a largura do dispositivo em pixels CSS e permite que as media queries respondam ao espaço disponível. Este gerador também aceita uma largura numérica positiva quando um viewport fixo e controlado é realmente necessário, como em uma interface incorporada antiga, um fixture reproduzível de navegador ou um teste de compatibilidade. Digite o número sem o sufixo px: 375 é válido, mas 375px não é um valor de largura aceito nessa declaração. Zero, valores negativos, entradas vazias, valores não finitos e palavras arbitrárias são rejeitados em vez de serem inseridos em uma marcação que parece plausível, mas não expressa a configuração solicitada. A largura retornada é normalizada; assim, um texto numérico como 375 vira o fragmento estável width=375. Essa validação torna a saída confiável para automação: o sucesso significa que a largura é exatamente a palavra-chave padrão ou um número positivo, sem correção oculta de grafia nem suposição dependente do navegador.

Defina a escala inicial e copie a tag

A escala inicial controla o nível de zoom quando a página é carregada pela primeira vez. O valor 1 é a escolha convencional: um pixel CSS corresponde a um pixel CSS do viewport antes de o usuário aplicar zoom. O campo usa 1 por padrão, mas você pode fornecer outro número finito positivo para uma necessidade específica de teste ou aplicação. O gerador valida essa configuração separadamente e preserva seu significado numérico em uma forma textual estável. Em seguida, produz uma tag completa como <meta name="viewport" content="width=device-width, initial-scale=1">. Coloque essa tag no head do documento, de preferência uma única vez, em vez de adicionar várias declarações de viewport cuja interação pode variar entre navegadores. A resposta também expõe a string content e os campos normalizados width e initial_scale. Use meta_tag ao escrever HTML, content quando um framework espera apenas esse atributo e os campos individuais para verificar a configuração em testes. Nenhuma solicitação de rede, inspeção de página ou detecção de user agent altera o resultado; entradas idênticas sempre retornam saídas idênticas no navegador e pela API.

Entenda o que o gerador não acrescenta

Esta capacidade gera intencionalmente apenas width e initial-scale. Ela não adiciona maximum-scale, minimum-scale, user-scalable, viewport-fit, interactive-widget nem outras diretivas opcionais, porque essas configurações exigem decisões de produto e acessibilidade, e não padrões automáticos. Restringir o zoom, em especial, pode dificultar o uso do conteúdo por pessoas que precisam ampliá-lo; por isso, um gerador simples não deve introduzir esse comportamento silenciosamente. A ferramenta também não audita uma página existente, detecta tags duplicadas, testa breakpoints responsivos nem comprova que o CSS é responsivo. Ela cria uma marcação determinística com base nas duas configurações fornecidas. Depois de adicionar o resultado, confira a página em tamanhos estreitos e largos, confirme que o texto continua legível, verifique se os controles não transbordam e teste o zoom em navegadores reais. Em projetos com templates, mantenha a declaração gerada no componente head compartilhado para que todas as rotas recebam a mesma política. O uso interativo nesta página é gratuito no navegador; uma solicitação automatizada à API custa US$ 0,002. Como o mesmo resolvedor puro atende aos dois caminhos, uma tag testada manualmente pode entrar em um script de build sem mudar a formatação ou as regras de validação.