Dimensionar o conteúdo para se ajustar à janela de visualização

Esta regra é acionada quando o PageSpeed Insights detecta que o conteúdo da página não cabe horizontalmente no tamanho especificado da janela de visualização, forçando o usuário a usar a rolagem horizontal para visualizar todo o conteúdo.

Visão geral

Em computadores e em dispositivos móveis, os usuários estão acostumados a rolar as páginas no sentido vertical, não em direção horizontal, por isso, forçar o usuário a usar a rolagem horizontal ou diminuir o zoom para ver a página inteira gera uma experiência do usuário insatisfatória.

Ao desenvolver um site para dispositivos móveis com uma tag de janela de visualização meta, é fácil criar acidentalmente um conteúdo da página que não se encaixa na janela de visualização especificada. Por exemplo, uma imagem exibida em uma largura maior do que a janela de visualização pode fazer com seja necessário rolar essa janela horizontalmente. Você deve ajustar o conteúdo para caber dentro da largura da janela, de modo que o usuário não precise rolar horizontalmente.

Recomendações

Como as dimensões de tela variam amplamente entre os dispositivos (por exemplo, entre telefones e tablets, e até mesmo entre os diferentes tipos de celular), configure a janela de visualização de modo que suas páginas sejam processadas corretamente em diversos dispositivos. No entanto, como a largura (em pixels CSS) da janela de visualização pode variar, o conteúdo da página não deve depender da largura específica de uma janela de visualização para ser processado adequadamente.

  • Evite definir grandes larguras absolutas de CSS para os elementos da página (como div{width:360px;} ), pois isso pode fazer com que o elemento fique muito grande para a janela de visualização em um dispositivo mais restrito (por exemplo, um dispositivo com uma largura de 320 pixels CSS, tais como um iPhone). Em vez disso, considere o uso de valores de largura relativos, como width:100%. Da mesma forma, cuidado com o uso de grandes valores absolutos de posicionamento, já que eles podem fazer com que o elemento extrapole a janela de visualização em telas pequenas.
  • Se necessário, use consultas de mídia CSS para aplicar um estilo diferente em telas pequenas e grandes. Este artigo do site HTML5 Rocks (em inglês) fornece novas recomendações sobre como abordar esse problema.
  • Para imagens, este artigo fornece uma boa visão geral sobre como veicular imagens de tamanhos ágeis sem incorrer em redistribuição desnecessária do conteúdo da página durante o processamento.