Basicamente, Viewport é a área na qual o site aparece; é onde ficará todos os elementos do layout. O tamanho do Viewport depende da resolução do monitor ou do display dos dispositivos móveis. Neste post veja Viewport em CSS.
Em monitores desktop, o viewport não é uma preocupação imediata, pois as resoluções ficam em torno de 1024 pixels de largura.
Agora, quando os displays variam, a largura do viewport passa a ser uma preocupação, uma vez que afeta diretamenta a maneira como os usuários veem o seu site.
Atualmente existem uma grande variedade de aparelhos com telas de tamanhos variados, tais como Notebooks, Tablets e smartphones.
Sem contar a grande variação do tamanho das telas entre os smartphones. Lembrando que tamanho de tela e resolução de tela são coisas distintas.
Por exemplo, a largura da tela do iPhone, na posição “retrato”, é de 320 pixels, no entanto a sua resolução padrão é de 980 pixels. Isso significa que uma imagem de 980 pixels de largura aparecerá no iPhone sem a barra de rolagem (a imagem ficará miniaturizada).
Esse recurso é interessante para promover a visualização de sites não responsivos em dispositivos móveis, miniaturizando o layout do mesmo.
A tag meta Viewport
O fato de os smartphones e dispositivos móveis terem telas pequenas dificulta a visualização dos sites e a leitura de conteúdo.
Por conta disso é possível customizar os viewports para que o site se adeque ao tamanho das telas desses dispositivos; a metatag viewport cuida disso.
Com essa metatag podemos customizar e preparar os websites com resoluções personalizadas para serem mostradas nos mais diversos tamanhos de displays. A sintaxe é:
<meta name="viewport" content="" />Os valores de “content” podem ser:
width: Especifica uma largura para o viewport. Os valores podem ser em px (pixels) ou “device-width”, que determina automaticamente um valor igual a largura da tela do dispositivo;
height: Especifica uma altura para o viewport. Os valores podem ser em px (pixels) ou “device-height”, que determina automaticamente um valor igual a altura da tela do dispositivo;
initial-scale: Especifica a escala inicial do viewport;
user-scalable: Especifica a possibilidade de o usuário fazer “zoom” em um determinado local da tela. É ativado quando o usuário dá dois toques numa área específica da tela.
O uso da tag viewport ajusta o site para uma melhor visualização do conteúdo. É uma alternativa a técnica de produção de sites responsivos:
Com a tag <meta name=”viewport” content=”width=320px”> conseguimos visualizar a contento sites que não foram projetados para serem visualizados em telas de dispositivos móveis (sites não responsivos).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=320px">
<title>Criando Bits</title>
</head>
<body>
... layout ...
</body>
</html> Aprenda através de projetos reais e aulas práticas. São 20 cursos completos + cursos bônus. Grupos privados exclusivos, atualizações constantes e lives semanais.
Python, PHP, Java Script, CSS, Node, Angular JS, MySQL, Photoshop, Flutter, AWS, Apache e muito mais!
CLIQUE NA IMAGEM ABAIXO E CONFIRA MAIS DETALHES:
Posicionamento dos elementos em CSS
Dúvidas ou sugestões? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits
Quer receber GRÁTIS o e-book "Como Formatar um Computador em 5 Minutos"?
Artigos Relacionados
Sobre o Autor
Bacharel em Sistemas de Informação pelo Instituto Paulista de Pesquisa e Ensino IPEP. Apaixonado por tecnologias e games do tempo da vovó!
0 Comentários