Gerador de meta tag viewport para sites responsivos

Gere uma meta tag viewport responsiva sem precisar decorar a ordem exata dos atributos ou a pontuação. 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. 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. 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. 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.

Entenda o que o gerador não acrescenta

Esta capacidade gera intencionalmente apenas width e initial-scale. 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.

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.