Meta tag viewport

Em HTML, a meta tag viewport é uma tag especial usada para controlar o layout e o dimensionamento de uma página da web em diferentes dispositivos, especialmente dispositivos móveis. Ela é colocada dentro da seção <head> de um documento HTML e fornece instruções ao navegador sobre como renderizar a página. A meta tag viewport é essencial para criar designs da web responsivos que se adaptam a vários tamanhos e resoluções de tela.

Esta é a sintaxe básica para usar a meta tag viewport:

<meta name="viewport" content="name=value, name=value">

• <meta>: A tag HTML usada para definir metadados sobre o documento HTML.
• name="viewport": Especifica que essa meta tag é usada para controlar as configurações da viewport.
• content: Um atributo que fornece as configurações da viewport como uma lista separada por vírgulas de pares name=value.

Pares name=value comuns usados no atributo content incluem:

• width=device-width: Define a largura da viewport para a largura da tela do dispositivo.

• initial-scale=1.0: Define o nível de zoom inicial quando a página é carregada pela primeira vez. Um valor de 1.0 significa sem zoom.

• maximum-scale=1.0: Define o nível máximo de zoom permitido.
• minimum-scale=1.0: Define o nível mínimo de zoom permitido.

Aqui está um exemplo de como usar a meta tag viewport em um documento HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Viewport Meta Tag</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <h1>Responsive Web Page</h1>
    <p>This page uses the viewport meta tag to adapt to different screen sizes.</p>
</body>
</html>

Neste exemplo, a meta tag da viewport está definida como width=device-width, initial-scale=1.0. Isso informa ao navegador para definir a largura da viewport como a largura do dispositivo e usar um nível de zoom inicial de 1.0 (sem zoom).