documento é renderizado, o agente deve oferecer um mecanismo de rolagem
Ou seja, dentro do contexto de desenvolvimento web, viewport é a parte visível
da página web que é renderizada pelos navegadores (desprezando painéis, barras de
menu, plugins, barra de rolagem, etc).
O que é a meta tag viewport
Os browsers mobile tentam exibir páginas web feitas somente para desktop (no
momento, a imensa maioria de todas elas) ajustando, automaticamente, o zoom do
display, e isso pode ser problemático para os sites que já foram planejados/otimizados para telas pequenas - todos os que você fará a partir da leitura deste livro, certo?
Felizmente, existe uma meta tag para contornar essa característica dos navega-
dores. É a meta tag viewport. Assim como qualquer outra meta tag, ela possui o
formato:
<meta name="viewport" content="">
Sendo que, em content, é possível especificar uma diversidade de parâmetros
e valores
conforme o tipo de visualização que se configurar às páginas. Se preferir, pense que com a meta tag viewport, é possível apresentar resoluções personalizadas
aos visitantes para determinados devices. Os principais e mais usados parâmetros de content são:
width: define a largura da viewport;
height: define a altura da viewport;
initial-scale: define a escala inicial (zoom) inicial da viewport.
Sendo que é possível usar mais de um parâmetro, ou mesmo todos, como valor
de content da meta tag viewport.
38
Casa do Código
Capítulo 3. layout fluído
Exemplos de uso da meta tag viewport
A própria Apple, que originalmente propôs e colocou em uso a meta tag viewport,
apresenta alguns exemplos que elucidam bastante a questão (http://ow.ly/baGbr).
Veja uma imagem de 320x356px, apresentada num iPhone, renderizada usando as
configurações default de viewport.
Agora, a página com o zoom na viewport sendo o mesmo do da própria imagem.
<meta name="viewport" content="width=320,initial-scale=1"> 39
3.4. Metatag viewport
Casa do Código
No entanto, como se trata de configurações que podem ser escolhidas conforme
a necessidade do projeto, o zoom na viewport pode ser maior ou menor do que a
área visível. Se o zoom é maior do que a área visível, então será possível deslizar a tela para ver mais da página.
<meta name="viewport" content="width=320,initial-scale=1.5"> 40
Casa do Código
Capítulo 3. layout fluído
E, como citado, também é possível definir um zoom menor para a viewport.
<meta name="viewport" content="width=320,initial-scale=0.5"> 41
3.4. Metatag viewport
Casa do Código
Nos dispositivos móveis, a pessoa também pode fazer zoom in e zoom out usando
gestos. Quando isso acontece, ela não altera o tamanho da viewport; altera sua escala!
Consequentemente, os gestos de pan e zoom não alteram o layout da página.
42
Casa do Código
Capítulo 3. layout fluído
A configuração ideal de viewport
Observando a tabela anterior, é possível observar que diferentes configurações de
viewport (e de zoom na viewport) produzem diferentes resultados e possibilidades de apresentação do site em condições controladas. Mas há uma questão que não ajuda
em nada quando pensamos em possibilidades de uso de width: para contemplar
todos os dispositivos móveis, seria preciso conhecer a largura de cada um deles!
O iPhone, nos exemplos de tela apresentados, tem largura de 320px. Mas to-
mando como exemplo somente os devices exemplificados no gráfico de resolução de
aparelhos, como visto na figura 2.1, seria muito trabalhoso identificar, marcar e fazer manutenções no código com todos os possíveis tamanhos.
Mas, não se preocupe, pois, mais uma vez, a tecnologia nos auxilia: existe uma
forma de especificar automaticamente o tamanho do device. É como se estivésse-
mos programando e usando uma variável que, por padrão, já contém a largura do
dispositivo que está realizando o acesso naquele momento. Basta usar:
<meta name="viewport" content="width=device-width">
Isso indica ao navegador que o width da meta tag viewport é o tamanho da lar-
gura do dispositivo!
43
3.4. Metatag viewport
Casa do Código
Em condições normais, também é interessante que, assim que a página renderize,
não haja alterações na escala inicial. Por isso, juntamente com width=device-width da meta tag viewport, é bom usar a initial-scale em 1. E esta, para a maioria dos
sites desenvolvidos segundo a filosofia do design responsivo, é a configuração idealde viewport.
<meta name="viewport" content="width=device-width,initial-scale=1"> Valores possíveis da meta tag
A seguir, veja a tabela - originalmente exibida no Nokia Developer (http://ow.
ly/baLZP) - com os parâmetros possíveis da meta tag viewport, exemplos de valores, respectivos valores-padrão e a descrição de cada um deles.
Lembrando para tomar cuidado e prestar bastante atenção no uso combinado
dos parâmetros possíveis para não causar efeitos desagradáveis e/ou não planejados.
Por exemplo, ao especificar:
<meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1">