HTML e acessibilidade

março 28th, 2012 | 0 comments

Ontem, estava experimentando animações e outros apetrechos da CSS3.

Três computadores ligados, carregando minha página-teste:

  1. Desktop Windows 7-64: 23 polegadas, com Chrome, Firefox 11 e Internet Explorer 9
  2. Tablet Coby Kyros MID 8024: 8 polegadas, com Dolphin HD
  3. Telefone móvel Sony Xperia Live com Walkman: 3,4 polegadas, com Opera Mini

Apanhei bastante mas descobri dois atalhos para fazer a página ter boa aparência, em todos os dispositivos. O problema principal estava na largura da página e das telas. Deixo aqui algumas dicas:

  • Prefira a propriedade max-width: ela permite que as telas maiores exibam a página na largura máxima, enquanto as telas menores podem redimensionar a página para sua largura padrão, deixando o conteúdo todo visível.
  • Utilize a meta tag com name=”viewport: recomendo começar experimentando o content=”width=device-width”, que libera a página para se moldar à largura da tela do dispositivo.

Vá em frente e experimente!

OBS: Nem perdi meu tempo testando animações no IE. No Opera, também não funcionou. Mas o IE tem uma frescura interessante: ele simplesmente ignora a propriedade min-width. O que ele é quer é uma nova folha de estilos, só para ele.

Tagged , ,

Deixe um Comentário

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">