Configurar a janela de visualização

Esta regra é acionada quando o PageSpeed Insights detecta que sua página não especifica uma janela de visualização, ou especifica uma que não se adapta a diferentes dispositivos.

Visão geral

A janela de visualização controla a forma como uma página da Web é exibida em um dispositivo móvel. Sem uma janela de visualização, os dispositivos móveis processarão a página em uma largura de tela típica dos computadores desktop, redimensionada para caber na tela. A definição de uma janela de visualização oferece controle sobre a largura e o redimensionamento da página em diferentes dispositivos.

Esquerda: uma página sem uma janela de visualização meta.
Direita: uma página com uma janela de visualização que corresponde à largura do dispositivo.

Recomendações

As páginas que forem otimizadas para serem exibidas corretamente em dispositivos móveis devem incluir uma janela de visualização meta no cabeçalho do documento, especificando width=device-width, initial-scale=1.

<meta name=viewport content="width=device-width, initial-scale=1">

Informações adicionais

Termos:

  • Pixel do hardware: um pixel físico na tela. Por exemplo, a tela do iPhone 5 tem 640 pixels de hardware horizontais.
  • Pixel independente do dispositivo (DIP, na sigla em inglês): um redimensionamento de pixels do dispositivo, usado para corresponder a um pixel uniforme de referência em uma distância de visualização normal, que tem aproximadamente o mesmo tamanho em todos os dispositivos. O iPhone 5 tem 320 dips de largura.
  • Pixel CSS: a unidade usada no layout de página que é controlado pela janela de visualização. As dimensões do pixel em estilos como width: 100px são especificadas em pixels CSS. A proporção de pixels CSS para pixels independentes do dispositivo representa o fator de dimensionamento, ou zoom, da página.

Páginas de computadores desktop em dispositivos móveis

Quando uma página não especifica uma janela de visualização, os navegadores móveis processarão essa página em uma largura de substituição que varia de 800 a 1.024 pixels CSS. O fator de dimensionamento da página é ajustado para que a página seja exibida na tela, forçando os usuários a aumentarem o zoom para que possam interagir com a página.

Tag da janela de visualização meta

Uma tag de janela de visualização meta fornece ao navegador instruções de como controlar as dimensões e o redimensionamento da página, devendo ser incluída no cabeçalho do documento.

Janela de visualização de largura específica

A janela de visualização pode ser definida com uma largura específica, por exemplo, width=320 ou width=1024. Embora não seja uma prática recomendada, esta pode ser uma solução temporária para garantir que as páginas com dimensões fixas sejam exibidas da forma esperada.

Janela de visualização ágil

O uso do valor width=device-width na janela de visualização meta orienta a página a corresponder à largura da tela em dips. Isso permite que a página redistribua o conteúdo para corresponder a diferentes tamanhos de tela.

Alguns navegadores, incluindo iOS e Windows Phone, mantêm a largura da página constante ao girar para o modo paisagem, aumentando o zoom em vez de redistribuírem o conteúdo para preencher a tela. Se o atributo initial-scale=1 for adicionado, os navegadores serão orientados a estabelecer uma relação de 1:1 entre os pixels CSS e os dips, independentemente da orientação do dispositivo, o que permite à página aproveitar toda a largura do modo paisagem.

versus
Esquerda: um iPhone 5 em rotação width=device-width, resultando em um modo paisagem com largura de 320 px.
Direita: um iPhone 5 em rotação width=device-width, initial-scale=1, resultando em um modo paisagem com largura de 568 px.

As páginas devem ser projetadas para funcionarem com diferentes larguras, usando uma janela de visualização. Para ver algumas sugestões, consulte nossas recomendações de como dimensionar o conteúdo conforme a janela de visualização.

Outras Considerações

Evite minimum-scale, maximum-scale, user-scalable

É possível definir o zoom mínimo e máximo ou desativar a capacidade do usuário de aumentar todo o zoom da janela de visualização. Estas opções afetam negativamente a acessibilidade e, em geral, devem ser evitadas.

@viewport

Embora amplamente utilizada, a tag da janela de visualização meta não faz parte de um padrão formal. Esse comportamento será incluído no CSS como parte da especificação Adaptação de dispositivos CSS. Até que essa especificação seja finalizada e implementada em grande escala, os criadores devem continuar usando a tag da janela de visualização meta para garantir a compatibilidade, seja individualmente ou com estilos de @viewport correspondentes.

Recursos: