Blog Web Standards

Soluções para os problemas enfrentados pelos desenvolvedores HTML e CSS no dia-a-dia

Estávamos desenvolvendo um projeto com CSS Sprites, utilizando uma imagem de background com 3000px x 2800px. Ao testarmos o layout responsivo no iPad, a imagem não aparecia! Eis que, ao diminuir as dimensões da imagem, ela começou a funcionar.

Fazendo uma breve pesquisa no conteúdo do Safari Content Web Guide, da Apple, descobri que é realmente imposto um limite de dimensões para as imagens, dependendo da capacidade de memória RAM do aparelho. Sendo assim, os limites que temos são:

  • Imagens de 3 megapixels para dispositivos com menos de 256mb de memória RAM;
Podemos utilizar o cálculo width * height ≤ 3 * 1024 * 1024 para estes dispositivos inferiores.
  • Imagens de até 5 megapixels para dispositivos com 256mb ou mais memória RAM (todos os iPads se enquadram neste quesito).

Como nossa imagem tinha 8,4 megapixels, tivemos que enquadrá-la nas dimensões dentro dos 5 megapixels, resolvendo nosso “bug”.

Escreva seu comentário