Articles
Introdução ao CSS
Viewport e Design Responsivo

Viewport e Design Responsivo

Este artigo explica o viewport e o design responsivo.

Você aprenderá como definir o viewport usando a tag <meta> e por que isso é importante.

YouTube Video

HTML para Visualização

css-responsive-viewport.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-responsive-viewport.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Responsive Design</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Viewport Properties</h2>
20        </header>
21        <article>
22            <h3>Viewport Example</h3>
23            <section>
24                <header><h4>HTML</h4></header>
25                <pre>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</pre>
26            </section>
27        </article>
28        <article>
29            <h3>width</h3>
30            <section>
31                <header><h4>HTML</h4></header>
32                <pre>&lt;meta name="viewport" content="width=device-width"&gt;</pre>
33            </section>
34        </article>
35        <article>
36            <h3>height</h3>
37            <section>
38                <header><h4>HTML</h4></header>
39                <pre>&lt;meta name="viewport" content="height=device-height"&gt;</pre>
40            </section>
41        </article>
42        <article>
43            <h3>initial-scale</h3>
44            <section>
45                <header><h4>HTML</h4></header>
46                <pre>&lt;meta name="viewport" content="initial-scale=1.0"&gt;</pre>
47            </section>
48        </article>
49        <article>
50            <h3>minimum-scale</h3>
51            <section>
52                <header><h4>HTML</h4></header>
53                <pre>&lt;meta name="viewport" content="minimum-scale=0.5"&gt;</pre>
54            </section>
55        </article>
56        <article>
57            <h3>maximum-scale</h3>
58            <section>
59                <header><h4>HTML</h4></header>
60                <pre>&lt;meta name="viewport" content="maximum-scale=2.0"&gt;</pre>
61            </section>
62        </article>
63        <article>
64            <h3>user-scalable</h3>
65            <section>
66                <header><h4>HTML</h4></header>
67                <pre>&lt;meta name="viewport" content="user-scalable=no"&gt;</pre>
68            </section>
69        </article>
70        <article>
71            <h3>Viewport Common Examples 1</h3>
72            <section>
73                <header><h4>HTML</h4></header>
74                <pre>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</pre>
75            </section>
76        </article>
77        <article>
78            <h3>Viewport Common Examples 2</h3>
79            <section>
80                <header><h4>HTML</h4></header>
81<pre>
82&lt;meta name="viewport"
83      content="width=device-width, initial-scale=1.0, user-scalable=no"&gt;
84</pre>
85            </section>
86        </article>
87        <article>
88            <h3>Viewport Common Examples 3</h3>
89            <section>
90                <header><h4>HTML</h4></header>
91                <pre>&lt;meta name="viewport" content="width=1024, initial-scale=1.0"&gt;</pre>
92            </section>
93        </article>
94    </main>
95</body>
96</html>

Sobre a configuração do viewport em HTML

A configuração do viewport é usada para controlar informações sobre a área de exibição (viewport) do dispositivo que exibe a página web. Ela desempenha um papel importante, especialmente no ajuste da exibição de páginas web em dispositivos móveis.

O que é um Viewport?

Viewport refere-se à área de exibição de uma janela do navegador ou dispositivo onde o usuário está visualizando uma página web. Em um desktop, o tamanho da janela do navegador torna-se o viewport, enquanto em dispositivos móveis como smartphones e tablets, o tamanho da tela do dispositivo torna-se o viewport.

Especificando o Viewport

Para controlar o viewport, você configura as definições do viewport usando a tag <meta> em HTML. Essa configuração permite especificar como a página será exibida em diferentes dispositivos.

Sintaxe Básica 

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

Este código define a largura do viewport para corresponder à largura do dispositivo e a escala de exibição inicial (nível de zoom) da página para 1.0 (exibição 100%).

Principais propriedades do viewport

As propriedades que podem ser especificadas principalmente com o atributo content do viewport são as seguintes:.

  1. width

    • Especificar a largura do viewport usando width. Definindo como device-width, o viewport é ajustado à largura física do dispositivo em pixels.
    • Exemplo: width=device-width

  2. height

    • Especificar a altura do viewport usando height, embora geralmente apenas a largura seja definida e a altura raramente seja especificada. Definindo como device-height, o viewport corresponde à altura física do dispositivo em pixels.
    • Exemplo: height=device-height

  3. initial-scale

    • Especificar o nível de zoom inicial da página usando initial-scale. 1.0 significa o nível de zoom de 100% do dispositivo.
    • Exemplo: initial-scale=1.0

  4. minimum-scale

    • Especifique a escala mínima para reduzir o zoom para minimum-scale. Definindo como 0.5, você pode reduzir o zoom até 50%.
    • Exemplo: minimum-scale=0.5

  5. maximum-scale

    • Especifique a escala máxima para aumentar o zoom para maximum-scale. Definindo como 2.0, você pode aumentar o zoom até 200%.
    • Exemplo: maximum-scale=2.0

  6. user-scalable

    • Especifique se o usuário pode ampliar ou reduzir a página para user-scalable. Especifique com yes ou no.
    • Exemplo: Definir user-scalable=no desativa o zoom pelo usuário.

Exemplos Comumente Utilizados

  1. Configurações Padrão de Responsividade
1<meta name="viewport" content="width=device-width, initial-scale=1.0">

Essa configuração ajusta automaticamente a página para corresponder à largura da tela de dispositivos móveis e garante que a página seja exibida com nível de zoom de 100%. É uma configuração fundamental para o design responsivo.

  1. Desativar Zoom
1<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

Essa configuração desativa o zoom pelo usuário. É utilizada quando o zoom não é necessário para um design específico ou quando operações de zoom podem causar problemas no design.

  1. Níveis Fixos de Zoom e Largura do Viewport
1<meta name="viewport" content="width=1024, initial-scale=1.0">

Essa configuração fixa a largura do viewport em 1024 pixels e define o nível de zoom em 100% na exibição inicial. É utilizada quando você deseja manter a largura da página constante, independentemente da largura do dispositivo.

Papel do viewport

Configurar o viewport é essencial para otimizar a exibição, especialmente em dispositivos móveis. Ao configurar corretamente o viewport, você pode evitar problemas como os seguintes:.

  • Impede que a página exceda a largura do dispositivo, o que exigiria rolagem.
  • Impede que textos e imagens fiquem muito pequenos para serem lidos facilmente.
  • Impede que a página inteira seja reduzida no zoom, dificultando a interação.

Resumo

  • O viewport é usado para controlar a área de exibição do dispositivo que exibe a página da web.
  • É usado principalmente para adaptar exibições em dispositivos móveis e desempenha um papel importante no design responsivo.
  • Configurações como width=device-width e initial-scale=1.0 são comumente usadas em designs responsivos padrão.

Configurar adequadamente o viewport pode oferecer aos usuários móveis uma experiência de visualização confortável.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video

Visão Geral do Design Responsivo em CSS