<
Menu

Tableless


nova-usabilidade-parte1

Você sabe o que é a “nova usabilidade”? – parte I

lock

Passwords em Mobiles

mobile

Utilizando APPs em vez de browsers

reponsive-foco

Responsive Web Design – focando a coisa certa


Manipulando a metatag Viewport

Aprenda a manipular o viewport de mobiles e outros dispositivos com a metatag Viewport do HTML.

O viewport é a área onde seu website aparece. É a área que você se preocupa se o vai ou não caber na hora da criação. O tamanho do viewport depende muito da resolução, tamanho do monitor e dispositivo utilizado. Em máquinas desktop nós não precisamos nos preocupar muito, já estamos acostumados com um determinado tamanho de tela e resolução média utilizada pelos usuários, que hoje gira em torno de no mínimo 1024 de largura. Mas quando começamos a variar muito o tamanho das telas, a largura do viewport começa a ser uma preocupação porque afeta diretamente a forma como o usuário utiliza seu website.

Hoje existe uma gama muito grande de aparelhos com telas de tamanhos variados. Comece a pensar pelos netbooks e depois vá diminuindo até chegar em um smartphone popular como iPhone, Milestone e etc. A variação de tamanho de tela é muito grande. Lembrando que o tamanho da tela é uma coisa e a resolução de tela é outra. Nunca confunda os dois. A largura da tela do iPhone na posição retrato é de 320px. Mas sua resolução padrão é 980px. Isso quer dizer que se você fizer um HTML simples, colocar uma imagem de 980px de largura e visualizar no iPhone, não existirá barra de rolagem. Obviamente a imagem ficará miniaturizada, como mostra abaixo:

Isso é interessante porque possibilita a boa visualização de websites que não estão preparados para mobiles. Vemos o site inteiro miniaturizado, com possibilidade de fazer zoom em qualquer parte do layout.

A tag meta viewport

Mesmo assim os smartphones tem telas pequenas podem dificultar a leitura se fizermos um sistema planejado para grandes resoluções. Por isso é interessante que possamos customizar o viewport para que ele se adeque a realidade desses dispositivos. É aí que entra a metatag viewport.
Com essa metatag iremos customizar a resolução inicial que o browser deve renderizar do viewport do dispositivo. Dessa forma, podemos preparar websites com resoluções personalizadas para smartphones e outros aparelhos.

A sintaxe é muito simples e deve ser colocada, como sempre, na tag head:

    <meta name="viewport" content="">

Os valores de content são os que seguem abaixo:

Valor Descrição
width Define uma largura para o viewport. Os valores podem ser em PX ou “device-width”, que determina automaticamente um valor igual a largura da tela do dispositivo.
height Define uma altura para o viewport. Os valores podem ser em PX ou “device-height”, que determina automaticamente um valor igual a altura da tela do dispositivo.
initial-scale Define a escala inicial do viewport.
user-scalable Define a possibilidade de o usuário fazer “zoom” em um determinado lugar da tela. É ativado quando o usuário bate duas vezes com o dedo em um lugar da tela.

Como usar

A tela abaixo não tem nenhuma tag de viewport definida.

Veja que o texto do elemento está bem pequeno. Isso é porque estamos visualizando-o em 980px de resolução em uma tela de smartphone.
Vou acrescentar a seguinte linha:

    <meta name="viewport" content="width=320px">

Define que a largura do viewport será 320px. O resultado está abaixo:

Se inserirmos uma imagem ou um objeto maior que a largura do viewport, uma barra de rolagem é criada. Não precisa se preocupar com o espaço da barra, já que pelo menos nos OSs de smartphones novos, como iPhone e Android, a barra fica invisível e só aparece pro cima dos elementos.

Adicionando o initial-scale com o valor de 1.5, temos um aumento na escala da visualização. Abaixo segue um exemplo comparativo. A imagem inserida tem 320px de largura, logo ela ficará bem justa na tela quando a escala é 1.0, e um pouco estourada quando a escala é 1.5 ou maior. Veja:

Agora com escala de 1.5:

Agora com escala de 2:

E agora com texto, nas mesmas proporções:



Se colocarmos o user-scalable como NO, desabilitamos a possibilidade do usuário de fazer zoom quando ele bate duas vezes com o dedo. Deixar habilitado o zoom é interessante utilizar quando o viewport não está sendo customizado. No nosso caso aqui, isso não iria adiantar muita coisa, já que todos os elementos estão com o tamanho natural, por isso vamos desabilitá-lo.

    <meta name="viewport" content="width=320px, user-scalable=no">

Atente-se para o detalhe de colocar , (vírgula) entre um valor e outro.
Veja um exemplo aqui. Tente ver com um smartphone como o iPhone, Android, etc.

Manipular o Viewport nos dá possibilidades para personalizar o visual de qualquer site para praticamente qualquer dispositivo, não importa sua resolução ou seu tamanho de tela. Quando unimos isso às media queries, temos um outro mundo de possibilidades.

Por Diego Eis

Diego Eis criou o Tableless para disseminar os padrões web no Brasil. Como consultor já treinou equipes de empresas como Nokia, Globo.com, Yahoo! e iG. É palestrante e empreendedor.

http://about.me/diegoeis/

Mais posts do autor

Comentários (25)

  • Frank

    Parabens diego por mais um ótimo artigo, essas diucas são muito valiosas, agora é só fazer testes para aprender mais, :)

  • http://rafael-labs.com Rafael Alencar

    Excelente artigo Diego!
    Sempre que possível abordem mais temas relacionados a mobile.
    Abraço!

  • http://barraponto.blog.br Capi Etheriel

    E isso pode ser utilizado em responsive designs? Os browsers desktop não vão interpretar essa meta tag e reagir a ela, exibindo o conteúdo do site como se tivesse 320px de largura na viewport?

  • Welvis Fernandes

    Um belo exemplo disso é o site http://2010.dconstruct.org/ quando você redimensiona sua tela para 480px de largura ele ajusta o site automaticamente pois está usando esse tag “viewport”. Muito bom o post! :D

  • Ângelo

    Diego,

    Preciso fazer um site p mobile, mas o PSD que recebi aparece o iphone com 640px (o dobro da largura), acredito que isso seja para a tela retina do iphone.
    Para que fique certo deveria deixar um scale:0.5 no certo?! mas isso iria funcionar em todos os sistemas? outra maneira seria reduzir o PSD em 50% no photoshop.

    Outro problema, pensei em deixar uma largura fixa de 320px, mas parece que o site não se ajusta no android (na horizontal), o ideal seria fazer o site com a largura 100%?!

    Abraço,

  • http://www.gabrielmagalhaes.com.br Gabriel magalhães dos santos

    Muito bom o artigo! Usei isso em tres sites mobile e funcionou perfeitamente!

  • Pingback: Sites mobile « Karin Watanabe

  • Pingback: Seu lugar ao sol | Leonardo Cotta

  • Pingback: Viewport Meta Tag, você usa? « Karin Watanabe

  • Pingback: Manipulando a metatag Viewport | Tableless » Web Design

  • Rafael

    No caso do background, a regra vale?

    Qual simulador de iPhone vocês recomendam?

    Obrigado.

  • Pingback: Tutorial jQuery Mobile: Primeiros passos | Alan Tavares

  • Breno

    Ola Diego, minha viewport não esta funcionando no ipad, o que pode estar acontecendo?

  • Leonardo

    Ótimo post Diego. Já estou esperando as outras partes. Obrigado.

  • Erick

    O que significa: “Vou acrescentar a seguinte linha:”

    [cc lang="html"]

    [/cc]

    ???
    O artigo está confuso. Um lixo

  • Erick

    O site está bugado :3

  • http://www.facebook.com/marcelodeassis Marcelo de Assis

    Você poderia ser um pouco mais empenhado e inspecionar o código fonte, aí você notaria que o plugin usado pra mostrar código não está funcionando, mas você pode ver o que foi usado.

  • Miguel

    Oi Diego….óptimo post…contudo tenho uma dúvida e vc talvez me possa ajudar….
    Estou desenhando um webpage com responsive design mas existem várias imagens que não se adaptam bem!!! Ou seja, queria mudar a imagem consoante o tamanho do viewport!
    A minha dúvida é se devo usar vários layouts ( 3 diferentes) para ajustar os imagens ou é melhor mudar as imagens utilizando javascript? Eu estou me iniciando e não sei o que fazer?
    Abraço e obrigado pelo post!

  • lenovaes

    Esclarecedor! Obrigado pelo artigo ;)

  • Carlos Madeira

    Olá, talvez você já tenha resolvido o seu problema mas pode ter alguém com a mesma dúvida.
    Respondendo a questão, eu sempre uso no meu css em img os atributos max-width: em porcentagem; min-width: em porcentagem, max-height: em porcentagem; min-height: em porcentagem para obter este tipo de resultado.
    Ex: #thumbs img{ max-width:100%; max-height:100%; }

    A div thumbs está dentro de outra div, a #box, que tem 25% de width e 25% de height do site, ou seja os 100% utilizados no exemplo são em cima dos 25% da div box.
    Fazendo assim, a imagem se ajusta no width ou height.
    Será que deu pra entender? Não sou muito bom em explicações escritas.

  • Carlos Madeira

    Gostei do site acima sitado mas eu não faria daquele jeito, gosto de usar assim:

  • Carlos Madeira

    *citado

  • Gustavo

    Vlw cara salvou meu Job !!!

  • vagner

    Muito Obrigado Diego, estava perdendo os cabelos para encontrar algo sobre isso, me matei com css e não sabia que era uma meta tag.

  • Victor Galdino

    Muito bom o artigo Diego! Ajudou um bocado! Parabéns pelo ótimo trabalho! E a propósito você parece ter ótimo gosto musical hehhehehe, parabéns mais uma vez!