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:
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:
Depois de determinar o viewport, você pode definir suas media queries normalmente, também diretamente de dentro do seu código CSS.
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:
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.