6

Nesta minha pergunta o usuário Guilherme Nascimento mencionou um termo chamado view-port na sua reposta em relação a uma div e o CSS dela, este termo é desconhecido para mim e me gerou algumas dúvidas.

Dúvidas

  1. O que é view-port?
  2. Qual a relação que o view-port tem com a minha aplicação Web?
  3. Só existe o view-port ou há outra coisa similar a ele?
2

1 Resposta 1

6

O que é viewport?

Em computação gráfica, a viewport é a porção de área visível de um plano.

Qual a relação que a viewport tem com a minha aplicação web?

Quando falamos em web responsiva, a viewport é a área visível pelo usuário de uma página web. O conteúdo que não está visível, só pode ser visto com um scroll, por exemplo.

Perceba que a viewport varia de dispositivo para dispositivo, por exemplo em computadores, tablets e celulares. Ele também varia, por exemplo, quando o usuário redimensiona o tamanho do seu navegador em seu sistema operacional.

O HTML5 introduziu a metataginglês name="viewport", que deixa o desenvolvedor ter controle na área visível do navegador.

Existem também medidas relativas no CSS que tem o tamanho da viewport como base. Veja:

  • vw: relativo a 1% da largura da viewport
  • vh: relativo a 1% da altura da viewport
  • vmin: relativo a 1% da dimensão mais baixa da viewport
  • vmax: relativo a 1% da dimensão mais alta da viewport

Isso facilita muito o desenvolvimento de páginas 100% responsivas.

Só existe a viewport ou há outra coisa similar a ela?

Na web existem duas viewports. A que é visível, é chamada de visual viewport. Ela geralmente é menor que a layout viewport, que é o conteúdo inteiro. Quando um usuário dá zoom na página com seu celular, por exemplo, a layout viewport continua a mesma, quem muda (no caso diminui) é a visual viewport. Veja mais sobre isso aquiinglês.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .