Para que serve a viewport?

A viewport determina a área visível de uma página web na janela do navegador. É necessário para:

• Design responsivo: Permite criar layouts que se ajustam a diferentes tamanhos de tela de dispositivos (smartphones, tablets, desktops).
• Escalonamento de conteúdo: Controla como o conteúdo é exibido e escalado de acordo com o tamanho do dispositivo.

<!-- Meta tag para configurar o viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Parâmetros content:

• width=device-width: A largura do viewport corresponde à largura do dispositivo em pixels CSS.
• initial-scale=1.0: Define o nível inicial de zoom da página.

Configurar corretamente o viewport garante uma exibição confortável do site em qualquer dispositivo, melhorando a experiência do usuário e o SEO.