Desenvolvendo essa nova cara do blog, aprendi alguns detalhes de CSS que podem ajudar quem trabalha com web. Não chega a ser um bug, nem atrapalha na maior parte dos casos, mas no Safari do iOS (o sistema operacional de iPhones, iPods touch e iPads), textos e formulários podem aparecer de forma diferente.

Tamanho da fonte

O webkit ajusta o tamanho da fonte para facilitar a leitura de textos, mas em alguns casos pode ficar esquisito ou quebrar o seu layout.

A solução é acrescentar essas linhas no body {}, p {}, ou numa div específica da página. Por exemplo:

Formulários

Os campos de formulários também ganham uma cara nova na versão mobile do Safari. Pelo exemplo da imagem abaixo — os comentários deste blog que vos bloga — a alteração pode não fazer diferença; Mas, no caso de formulários mais customizados, pode tirar a graça do design.

Para retirar essa borda e efeito padrão, fica o exemplo:

Margem de leitura

Pra terminar, um detalhe relacionado à experiência do usuário. Alguns sites esquecem de deixar uma margem lateral no conteúdo, e para quem visualiza uma página, principalmente no caso de leituras, fica bem ruim quando o texto fica colado nos limites da tela.

Só colocar uma margin ou padding (dependendo do caso) de pelo menos 10 pixels em cada lado e problema resolvido! [Atualização: o pessoal do iG leu o post e colocou a margem de leitura na área de Economia :-)]

• • •

Dicas simples, mas pela repercussão que os tweets sobre o assunto causaram, achei que seria interessante pra compartilhar aqui.