HTML5 e o Viewport

Viewport (src Google Images)

Viewport (fonte Google Images)

No início do mês de Maio, o Google tornou oficial que a utilização do seu motor de pesquisa através de dispositivos móveis já suplanta a utilização via desktop. Ou seja, cada vez mais se navega na Web através de dispositivos móveis – smartphones, tablets, etc. Então certamente que já lhe aconteceu aceder a uma página através do seu dispositivo, e o browser ao concluir o carregamento da mesma, umas vezes encolhe todo o conteúdo para caber dentro do ecrã, noutras vezes deixa o conteúdo no seu tamanho original excedendo o espaço disponível no ecrã (viewport).

Esse comportamento é controlado através de uma meta-tag de HTML5, onde poderemos definir quanto é que o viewport poderá encolher ou aumentar o conteúdo da página.

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

Através do atributo content poder-se-á então declarar:

  • width:  a dimensão da página;
  • initial-scale: o nivel inicial de zoom da página quando carregar no browser;
  • minimum-scale: o nível mais baixo de zoom que a página permite;
  • maximum-scale: o nível mais alto de zoom que a página permite.

No código-exemplo acima, está-se a declarar que o conteúdo deverá utilizar somente a área disponível do viewport, sem permitir qualquer tipo de zoom (in ou out) do conteúdo. Esta definição utiliza-se quando se pretende ter um conteúdo responsivo (mais sobre este tema num futuro artigo).

Poderão ler mais sobre as especificações da meta-tag viewport no site do W3C.

Deixar uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *