Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Responsive Web Design
Webdesign

Dica Rápida: Não Esqueça da Meta Tag de Viewport

by
Length:ShortLanguages:
This post is part of a series called Strange and Unusual HTML.
Explaining the “Details” and “Summary” Elements

Portuguese (Português) translation by Cassio Cardoso (you can also view the original English article)

Eu me lembro da minha primeira VOYAGE em web design responsivo, eu usei um grid clássico, lutei com o layout flexível e ataquei as media queries pela primeira vez. Alongando e encolhendo a janela do navegador resultou em uma visão satisfatória do meu design respondendo de acordo com a resolução. Então eu testei em um celular. Não funcionou - eu estava olhando para uma versão esticada para baixo da versão do desktop. A solução, como eu descobri, era simples...

Nota: Este tutorial foi publicado pela primeira vez em fevereiro de 2012, mas ele é usado muitas vezes como referência em outros tutoriais (e as coisas mudaram), então eu senti que isso justificaria uma atualização.

A Base

Se você não ler mais nada dentro deste post, preste atenção nesse pequeno conselho: se você está desenvolvendo uma aplicação responsiva, use a meta tag viewport no seu <head>. Em sua forma básica, ele irá prepará-lo para os diferentes dispositivos existentes:

O Problema

Vamos usar um layout de exemplo que eu montei. Dê uma olhada, você verá ele encolher e crescer a medida que você alterar o tamanho do seu navegador. Há também única media query que deixa o texto maior e com uma brilhante #ff333e cor nas telas maiores. Adorável.

Veja como ele se parece no Chrome no OSX:

viewport-chrome-correct

E aqui como ele se parece quando a janela do navegador é diminuida:

viewport-chrome-squish

Agora vamos ver como ele se parece em um smartphone (nesse caso em um Safari em um iPhone 4):

viewport-iphone-incorrect

A primeira coisa que você vai notar é o título vermelho: é uma dica que não estamos olhando para o layout estreito que estávamos esperando. Na verdade, estamos olhando para uma versão com zoom diminuido.

O Safari do iOS assume que as páginas da web tem 980px de largura, e reduz o zoom para ajustar o conteúdo à largura disponível (iPhone 4) de 320px. Por isso o conteúdo é muito menos legível, a menos que você aumente o zoom.

Por quê?

Como se costuma dizer, a suposição é a mãe de... alguma coisa e é exatamente isso que os navegadores móveis tem que fazer se você não instruí-los. Quando você visita um site através de um navegador móvel ele vai assumir que você está vendo uma grande versão do desktop e que você deseja ver toda a tela e não somente a parte superior esquerda. Ele irá, então, definir a largura da tela (no caso do Safari no iOS) em 980px, espremendo tudo para ajustar ao tamanho reduzido da tela.

A Meta Tag Viewport

Use a meta tag viewport, introduzida pela Apple, e então adotada e desenvolvida por mais pessoas.

Ela se parece com isso:

Dentro do content="" você pode entrar com uma série de valores separados por vírgula, mas vamos focar nos fundamentos agora.

Por exemplo, se o seu layout móvel é definido em 320px, você pode especificar o viewport dessa forma:

Para layouts flexíveis é mais prático basear a largura do seu viewport no dispositivo em questão, para igualar a largura do layout à largura do dispositivo você deve digitar:

Para se certificar que o seu layout será mostrado como você planejou, você pode definir o nível de zoom inicial. Isso, por exemplo:

... irá garantir que, após a abertura, o layout será exibido corretamente em escala 1:1. Nenhum zoom será aplicado. Você pode ir mais longe e evitar qualquer zoom pelo usuário:

Nota: Antes de aplicar o parâmetro de maximum-scale, considere se você realmente deve estar impedindo que os usuários deem o zoom. Eles são capazes de ler tudo da melhor forma possível?

Usando a meta tag viewport de forma errada pode prejudicar os usuários com problemas visuais acessando o seu site.

Juntando Tudo

Estes valores juntos nos dão um grande padrão para trabalhar com:

Vejamos como isso afeta o nosso exemplo

viewport-iphone-correct

Como você pode ver, tudo permanece na escala correta. O texto se agrupa em vez de diminuir, e nosso cooperador visual (o título vermelho) desapareceu.

Mas!

Uma gorjeta no chapéu do Jason por apontar isto nos comentários. Ao definir que a largura do seu layout é igual a largura do seu dispositivo, você terá problemas quando um dispositivo é utilizado em modo de paisagem. Dê uma olhada em como um iPhone 4 lida com o nosso demo, em modo paisagem:

Ruined
Ruined.

O navegador se vê obrigado a dar zoom na página, para corresponder a largura da página.

Para contornar esta situação, poderíamos, como o Jason apontou, usar JavaScript para escolher condicionalmente que atributos da meta tag devem ser utilizados, mas a solução mais simples parece ser, simplesmente, ignorar o width completamente. Definindo o initial-scale a largura é inferida. É assim que nossa nova e simplificada demo aparece no modo de paisagem:

Much better
Muito melhor.

Não é o padrão que você está procurando

A meta tag viewport foi a solução da Apple para o problema. Ela foi adotada rapidamente por outras plataformas, mas nunca foi apresentada pelo W3C. A Microsoft trouxe isso à tona quando ele escolheram que o IE10 iria ignorar o viewport em determinadas circunstâncias. Ao invés disso, eles optaram por usar Adaptação de Dispositivos por CSS, que é o que o W3C está propondo.

Em suma, as propriedades semelhantes do viewport são definidas dentro do CSS usando a regra @viewport, ao invés de dentro do HTML.

Ou, de acordo com nossa nova abordagem de não especificar a largura do dispositivo, nós podemos usar:

Dado que é um trabalho em andamento, o IE10 requer a versão pré-fixada da proposta, que é algo como isto:

É uma solução muito mais elegante do que a meta tag, mas é um longo caminho de ser totalmente suportado. Coloque-o em seu CSS agora, para se certificar que o seu layout se comporte como planejado no IE10 "snap mode", e fique de olho em seu progresso no futuro. Este é o lugar para onde o controle do viewport está direcionado.

Você pode ler mais a respeito disso na postagem do Tim Kadlec IE10 Snap Mode and Responsive Design.

Conclusão

Web design responsivo não é apenas para as pessoas que gostam de ver seus navegadores crescerem e diminuírem, é sobre alcançar o maior número de dispositivos, telas e resoluções que for possível! Coloque a meta tag viewport em seu <head>, além da regra @viewport em seu CSS quando você estiver construindo layouts flexíveis e assim você está pronto para ir.

Leitura Adicional

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.