Para que serve o viewport no desenvolvimento web?

A viewport é a área visível de uma página web no navegador. Ela define o tamanho e a escala do conteúdo exibido ao utilizador. Sem ela, as páginas poderiam não ser exibidas corretamente em diferentes dispositivos, desde desktops até smartphones.

A sua principal função é adaptar o layout da página às dimensões do ecrã do dispositivo. Com a meta tag viewport, é possível controlar a largura e o escalonamento do conteúdo.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• width=device-width: Define a largura da janela de visualização igual à largura do ecrã do dispositivo.
• initial-scale=1.0: Define o nível inicial de zoom ao carregar a página. A unidade significa sem zoom (100%).

O uso de viewport está estreitamente relacionado com tecnologias de design responsivo, como as consultas de mídia CSS, que permitem aplicar estilos diferentes dependendo do tamanho da janela de visualização.