Um dos principais conceitos em qualquer design responsivo é a alteração do tamanho da viewport. Isso porque as viewports para dispositivos móveis variam muito de viewports de desktop. Para controlar o tamanho da viewport, usamos tradicionalmente a metatag da viewport.
No entanto, a metatag da janela de visualização, como todos os piores desenvolvimentos de navegador do último para sempre, não é válida para o W3C. Foi originalmente introduzido pela Apple no Safari e desde então tem sido adotado por outros navegadores. Isso resulta em uma implementação inconsistente.
Felizmente, o W3C veio em nosso auxílio novamente, introduzindo a regra de CSS @viewport.
Usando a antiga abordagem de metatags, é assim que diríamos ao navegador de que tamanho a viewport deveria ser vista:
Além de ser inválida, a instrução da janela de visualização não é dados, é apresentação. Então, seguindo os nossos princípios de separação de dados e apresentação, a instrução da janela de visualização precisa estar em CSS, não em HTML.
A solução W3C no CSS é assim:
@viewport {width: device-width;}Ou alternadamente, você pode definir o visor com um número, da seguinte forma:
@viewport {width: 640px;}Você pode usar a regra @viewport em conjunto com @media queries para forçar qualquer viewport maior que 960 a diminuir para 960px, da seguinte forma:
@media screen and (min-width: 960px){@viewport {width: 960px;}}A regra @viewport também nos permite ampliar uma página por padrão e até definir o zoom máximo:
@viewport {width: 960px;zoom: 1;max-zoom: 3;}É possível bloquear totalmente o zoom, definindo a propriedade de zoom do usuário como fixa. No entanto, o zoom, especialmente em smartphones, é necessário para acessibilidade e eu recomendaria usar essa propriedade.
Mais uma propriedade muito útil nos permite bloquear a nossa página web no modo paisagem ou retrato:
@viewport {orientation: landscape;}Eis a má notícia: atualmente, essa regra é suportada apenas pelo Internet Explorer 10 e pelo Opera, e requer os prefixos de navegador -ms e -o-, respectivamente.
Embora isso seja decepcionante para dizer o mínimo, o fato de que a funcionalidade de viewport já está disponível na maioria dos navegadores deve significar que essa é uma regra simples de se pegar. Espero que comecemos a vê-lo introduzido em construções noturnas muito em breve.
Você se preocupa com a conformidade com os padrões? O W3C ajuda ou atrapalha o progresso na web? Deixe-nos saber nos comentários.
Imagem em destaque / miniatura, imagem da janela via LostBob Photos