Tableless

Busca Menu

Entendendend a regra @viewport do HTML

Seja o primeiro a comentar por

Faz algum tempo que podemos manipular o viewport dos browsers para podermos entregar um website mais adequado e confortável para os usuários. Essa manipulação era feita diretamente via uma metatag no head do documento, algo assim:

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

Isso é necessário por que você tem uma resolução gigante em aparelhos com a tela “relativamente” pequena, com 320×480. Lembre-se que a resolução é uma coisa, o tamanho da tela é outra. Um iPhone tem uma resolução gigante (para mobiles, claro), de algo em torno de 900×640, mas o tamanho da tela é de 320×480. É por isso que quando você abre um website sem manipulação de viewport, ele aparece miniaturizado. Por que embora você esteja vendo o site em uma tela pequena, o site aparece como se estivesse numa resolução alta.

Quando manipulamos o viewport do browser, nós “diminuímos” essa resolução. Na linha do exemplo acima eu diminui a resolução do viewport do browser mobile para ter exatamente a mesma largura e altura da tela do aparelho. Logo, em vez de uma resolução de 900×640, você verá o site em um resolução de 320×480, no caso do iPhones 4S que mencionamos logo acima.

Assim fica bem mais fácil planejar um website para mobiles. O usuário não vai precisar ficar fazendo zoom ou gestos para procurar informações no site. Você planejará o design para que caiba nesse limite.

O pessoal do W3C está expandindo essa ideia e agora nós podemos aplicar a regra Viewport dentro de um código CSS em vez de ter que colocá-lo sempre no head.

A sintaxe é simples. Veja um exemplo:

@viewport {
  width: device-width;
  zoom: 1;
}

Depois de determinar o viewport, você pode definir suas media queries normalmente, também diretamente de dentro do seu código CSS.

@viewport {
  width: device-width;
  zoom: 1;
}

@media screen and (min-width: 400px) {
  div { color: red; }
}

@media screen and (max-width: 400px) {
  div { color: green; }
}

Lembrando que as media queries podem ser também definidas vida tag link, no head, assim:



Assim você pode chamar apenas um CSS e a partir dele distribuir seu código para as telas determinadas, tipo assim:


@viewport {
  width: device-width;
  zoom: 1;
}

@media screen and (min-width: 400px) {
  @import url(desktop.css);
}

@media screen and (max-width: 400px) {
  @import url(mobile.css);
}

Toda essa informação faz parte da documentação que o W3C mantém chamda CSS Device Adaptation.

O @viewport é suportado hoje pelo Internet Explorer 10 e pelo Opera, ainda sob seus respectivos prefixos. Mesmo assim, não demora muito para que os browsers Webkit suportem também, já que a ideia da manipulação de viewport originou-se na Apple com a vinda do iPhone.

Mais informações? Leia aqui e aqui.

Publicado no dia