Corrigir problema de tamanho de fonte no Mobile Safari (iPhone), onde o texto é processado de forma inconsistente e algumas fonts são maiores do que outras?

Nosso site renderiza com tamanhos de fonte inconsistentes no Safari móvel – e, até onde podemos dizer, apenas o Mobile Safari. Isso nos impressionou muito.

Analisamos o site com o Firebug e as áreas incorretas estão herdando os estilos corretos, mas as fonts ainda são renderizadas com os tamanhos incorretos.

1) Visite http://www.panabee.com .

2) Realize uma pesquisa por um nome de domínio.

As checkboxs no lado esquerdo mostram os tamanhos de fonte incorretos. O tamanho da fonte deve coincidir com o tamanho da fonte no lado direito (ambos os títulos de checkbox e cópia de checkbox). Por exemplo, os títulos “Variações” e “Twitter” são muito maiores que o título “Finalidades Alternativas”.

Alguma pista porque?

Mobile Safari (como o Chrome para Android, Mobile Firefox e IE Mobile) aumenta o tamanho da fonte de blocos largos (em todos os momentos), de tal forma que se você toque duas vezes para aumentar o zoom naquele bloco (o que ajusta o bloco à largura da canvas) , o texto será legível. Se você definir -webkit-text-size-adjust: 100% (ou none ), ele não poderá fazer isso e, assim, quando um usuário fizer um duplo toque para aumentar o zoom em blocos amplos, o texto ficará ilegivelmente pequeno; os usuários poderão lê-lo se apertarem o zoom, mas o texto será mais largo que a canvas e eles terão que se deslocar horizontalmente para ler cada linha de texto!

  1. O ideal seria consertar isso usando técnicas de design da Web responsivo para fazer com que seu design se adaptasse aos tamanhos de canvas móvel (caso em que você não teria mais blocos muito largos, então os navegadores móveis não ajustariam mais os tamanhos de fonte).

  2. Se isso não for uma opção e você estiver preso ao serviço de um site para usuários móveis, verifique se é possível ajustar seu design para que nenhum bloco de texto seja mais largo do que a largura do dispositivo móvel (por exemplo, 320px para muitos telefones retratados ) (você pode usar CSS específico para dispositivos móveis para evitar afetar os navegadores de desktop), então o Mobile Safari não precisará aumentar os tamanhos de fonte (e navegadores que refluem texto, como o Android Browser e Opera Mobile, também não precisarão mudar seu layout).

  3. Por fim, se você realmente precisar impedir que o Mobile Safari ajuste seus tamanhos de fonte, defina -webkit-text-size-adjust: 100% , mas faça isso apenas como último recurso, pois é provável que os usuários de dispositivos móveis tenham dificuldade de ler texto, como ele vai ser muito pequeno ou eles vão ter que se deslocar de um lado para o outro depois de cada linha que lêem. Observe que você deve usar 100% não none porque nenhum deles tem efeitos colaterais desagradáveis ​​em navegadores de desktop . Existem também as -moz-text-size-adjust equivalentes -moz-text-size-adjust e -ms-text-size-adjust para o Mobile Firefox e o IE Mobile.

Edit: por exemplo, no seu caso, o mais simples é provavelmente a segunda alternativa, então você pode tentar adicionar o seguinte CSS:

 /* Mobile browsers only */ @media only screen and (max-device-width: 480px) { table#all_results { width: auto; } td#main_box { width: 320px; } td#side_box { width: 320px; } } 

Embora não seja ideal para codificar 320px assim; Você poderia melhorar isso usando uma variedade de consultas de mídia CSS ou obtendo a largura do dispositivo do JavaScript.

Aqui está o que funcionou (testado apenas no iPhone 4 tho):

 /* Mobile browsers only */ @media only screen and (max-device-width: 480px) { td#main_box { -webkit-text-size-adjust:100% } } 

Concedemos a resposta a John, já que sua solução era a base dessa.

Provavelmente não é a resposta mais elegante, mas funciona.

-webkit-text-size-adjust: none; fará com que você não consiga ampliar dispositivos móveis. Você deve usar 100% vez disso.

 -webkit-text-size-adjust:none; 

provavelmente resolverá seu problema.

 target-element { -webkit-text-size-adjust:80% } 

ainda vai ampliar, mas mantém 80% menor que o padrão dos webkits.