Enquanto estudava CSS recentemente, percebi que cometi uma pequena injustiça em um dos meus textos antigos aqui no blog. Na época eu havia argumentado que as ferramentas de teste de responsividade dos navegadores Mozilla Firefox e Google Chrome eram imprecisas para testar resoluções de telas de smartphones e tablets. Mas após aprender o que acabei de aprender, percebi que eu é que não estava sabendo usar essas ferramentas corretamente.
Recapitulando: eu havia dito no post que ao digitar os valores de resolução de tela de um smartphone, os modos de design responsivo dos navegadores não exibiam um determinado site com as dimensões corretas, mostrando-os com uma percepção de tamanho diferente do visto no dispositivo a ser simulado. Nas duas imagens abaixo eu vou reproduzir esse erro pra tentar deixar isso mais claro pra vocês:
Meu telefone, um Moto G 2ª Geração, tem resolução de tela de 720×1280 pixels. Ao digitar esse valor no Modo Responsivo do Firefox (ou nessa mesma ferramenta no Chrome, Opera ou outro navegador com ferramentas de desenvolvedor), a exibição deveria ser idêntica a que vemos na própria tela do telefone, certo? Acontece que esse equívoco me ocorreu porque eu não conhecia ainda o conceito de viewport.
O que é viewport?
Essa discrepância ocorre porque existe diferença real entre o que chamamos popularmente de “resolução de tela” e a resolução de exibição de um dispositivo. As fabricantes de dispositivos adoram exibir números grandes para chamar a atenção do consumidor e por isso falam da resolução de tela como um dos grandes atrativos. Entretanto, na hora de desenvolver sites e sistemas responsivos, precisamos detectar com precisão como cada pixel é renderizado pelos aparelhos que usamos no dia-a-dia.
Como muito bem explicado nesse artigo do Leandro Lima, existem diferenças no que chamamos comumente de “pixel”, com os quais precisamos lidar no desenvolvimento web. O grande lance da responsividade é saber relacionar o tamanho real de um dispositivo em pixels e a capacidade de esse dispositivo exibir os pixels declarados no CSS que formam os websites que visitamos.
Daí o conceito de viewport ser tão importante. O viewport nada mais é do que o tamanho exato da parte da janela do navegador que exibe um website, esteja esse navegador rodando no seu computador, tablet, telefone, relógio inteligente, console de videogame ou qualquer outro dispositivo. Quando você redimensiona a janela do seu Firefox ou Chrome e muda o tamanho dessa janela, está alterando o viewport.
Além de delimitar o tamanho real da área de exibição de um website ou documento web, o viewport pode ser modificado e manipulado dependendo da densidade de pixels que a tela de um dispositivo possui. A densidade de pixels (cujo símbolo é ppi: pixels per inch, sigla em inglês para pixels por polegada) é a quantidade de pixels de CSS que cabem em uma polegada de tamanho físico de uma tela: uma tela com 96 ppi (como a de antigos monitores VGA) possui uma densidade de pixels muito menor do que uma tela de cerca de 600 ppi (como a de qualquer modelo recente de iPhone). Isso significa uma maior riqueza de detalhes na exibição de conteúdo.
Existe também a densidade de pontos (cujo símbolo é dpi: dots per inch, sigla em inglês para pontos por polegada), que funciona de maneira similar, mas é relacionada a tamanhos e resoluções de impressão – muito comum no jargão de quem trabalha com artes gráficas e impressão de peças publicitárias. Este post do site Design Culture explica bem a diferença entre esses dois tipos de medida.
A meta tag viewport
Essa relação entre o tamanho real de uma tela e o tamanho de um documento web definido pelo CSS é calculada automaticamente pelos navegadores através da declaração do viewport no HTML.
O viewport é declarado no HTML através de uma meta tag homônima, a ser posicionada entre as tags <head> de um documento web. Um exemplo de declaração de viewport pode ser visto na meta tag abaixo. Essa meta tag define a largura de exibição da página como exatamente igual à largura de exibição do dispositivo ou da janela do navegador (width=device-width), além de definir o zoom da exibição da página como neutro no momento em que a página web é aberta pelo navegador (initial-scale=1.0).
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
É esta simples linha de código declarada no HTML que torna possível fazermos sites responsivos com a relação correta de tamanhos de tela. E é graças a ela que conseguimos manipular a maneira como um website é exibido através da configuração de media queries no CSS (assunto sobre o qual falarei com mais detalhes em um post futuro).
Afinal, como obter o viewport correto de um dispositivo?
Existe uma maneira de obter facilmente o valor do viewport da tela de um dispositivo. Basta acessar o site My Device – através do endereço mydevice.io – e logo de cara ele mostrará o valor exato do viewport. Você até pode brincar com esse valor redimensionando a janela do seu navegador e vendo o valor mudar em tempo real – o que inclusive facilitará o entendimento do conceito de viewport. Foi inclusive graças a esse site que eu consegui finalmente aprender tal conceito e começar a escrever minhas próprias media queries nos meus projetos, em vez de ficar totalmente dependente de frameworks front-end como o Foundation e o Bootstrap.
Para demonstrar como o site My Device funciona e também para demonstrar como o conceito de viewport vale para qualquer dispositivo, eis abaixo o valor de viewport do navegador do videogame Xbox 360, exibido em um monitor Full-HD comum:
Perdão pelo vacilo
Isso nos leva de volta às ferramentas de design responsivo dos navegadores Firefox e Chrome, sobre as quais eu falei no começo deste post. Vamos agora repetir aquele teste de responsividade, mas desta vez com o modo responsivo do Firefox corretamente configurado.
Considerando que o tamanho do viewport do meu celular é de 598 pixels de largura em modo paisagem e de 360 pixels em modo retrato, basta eu digitar o valor de 360×598 pixels e salvar como preset no navegador. O resultado é este:
E este é o conceito de viewport, bem como um pequeno resumo do que eu consegui aprender a respeito. Conforme o progresso dos meus estudos, pretendo escrever mais sobre responsividade aqui no blog, sendo que meu próximo post abordará o recurso de media queries do CSS3.
Referências:
- Desenvolvimento responsivo e viewport – site Popup
- Manipulando a metatag viewport – Tableless
- A diferença entre DPI e PPI – Design Culture
[Agradecimentos ao amigo Dico Didiraja
por me indicar o site My Device.]
Cara, bom!!!