Cascading Style Sheets (CSS) - Viewport
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.
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.
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 é:
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>