Alguns tamanhos de fonte são aumentados no Safari (iPhone)

110

Existem CSS ou outras razões pelas quais o Safari / iPhone ignoraria algumas configurações de tamanho de fonte? No meu site específico, o Safari no iPhone apresenta um tamanho de fonte: texto de 13px maior do que o tamanho de fonte: texto de 15px. Ele não suporta o tamanho da fonte em alguns elementos?

css safari mobile-safari font-size Alex
fonte

Respostas:

248

A resposta de Joe contém algumas boas práticas recomendadas, mas acho que o problema que você está descrevendo gira em torno do fato de que o Mobile Safari dimensiona automaticamente o texto se achar que o texto ficará muito pequeno. Você pode contornar isso com a propriedade CSS -webkit-text-size-adjust. Aqui está um exemplo de como aplicar isso ao seu corpo, apenas para o iPhone:

@media screen and (max-device-width: 480px){
  body{
    -webkit-text-size-adjust: none;
  }
}
David Kaneda
fonte
2
Acabei de encontrar esse problema. Este pequeno hack de tela de mídia funciona perfeitamente. Vou começar a incorporá-lo ao meu arquivo CSS inicial.
Throttlehead
1
Nossa, doente! Estou me deixando louco, até tentei mudar o nome da classe e configurar o css em linha com jQuery antes de encontrar isso. Lifesaver!
Christoffer Bubach
1
Ele ajudou muito. Saúde :)
Dead Man
2
Certifique-se de usar a consulta de mídia. Parece que isso pode dificultar a leitura de alguns textos: cuidado com -webkit-text-size-ajustar: nenhum
Gemmu
9
A resposta deve ser atualizada para -webkit-text-size-adjust: 100%- isso evita a atualização automática, mas permite o zoom iniciado pelo usuário. (fonte)
Shawn Erquhart
11

Além disso, certifique-se de definir a configuração de zoom inicial para 1 na meta tag da janela de visualização:

<meta name="viewport" content="width=device-width; initial-scale=1.0;" />
johnpolacek
fonte
7

Não uso mais as definições de pixel, pois elas são muito confusas e não são exatamente as mesmas em todos os serviços visuais.

Conheça as unidades

  1. “Ems” (em): O “em” é uma unidade escalonável usada em mídia de documento da web. Um em é igual ao tamanho da fonte atual, por exemplo, se o tamanho da fonte do documento é 12pt, 1em é igual a 12pt. Ems são escaláveis ​​por natureza, então 2em seria igual a 24pt, .5em seria igual a 6pt, etc. Os Ems estão se tornando cada vez mais populares em documentos da web devido à escalabilidade e sua natureza amigável para dispositivos móveis.
  2. Pixels (px): Pixels são unidades de tamanho fixo usadas na mídia da tela (ou seja, para serem lidas na tela do computador). Um pixel é igual a um ponto na tela do computador (a menor divisão da resolução da tela). Muitos designers da web usam unidades de pixel em documentos da web para produzir uma representação perfeita de pixel de seu site à medida que é processado no navegador. Um problema com a unidade de pixel é que ela não aumenta para leitores com deficiência visual ou para baixo para caber em dispositivos móveis.
  3. Pontos (pt): Os pontos são tradicionalmente usados ​​em mídia de impressão (qualquer coisa que seja impressa em papel, etc.). Um ponto é igual a 1/72 de polegada. Os pontos são muito parecidos com os pixels, pois são unidades de tamanho fixo e não podem ser redimensionados.
  4. Porcentagem (%): A unidade de porcentagem é muito parecida com a unidade “em”, exceto por algumas diferenças fundamentais. Em primeiro lugar, o tamanho da fonte atual é igual a 100% (ou seja, 12pt = 100%). Ao usar a unidade percentual, seu texto permanece totalmente escalonável para dispositivos móveis e para acessibilidade.

fonte
4
A resposta é usar 1 unidade predefinida para o texto (ou seja, 12pt) e, em seguida, para todas as definições css subsequentes, usar tamanho da fonte: 90%; ou tamanho da fonte: 110%; etc etc. Isso é mais facilmente acessível para todos os seus dispositivos suportados.
1
Você esqueceu o mais importante: REM (referência EM). Você pode usá-lo em todo o documento e ele permanece o mesmo (não está em cascata).
Andrew Swift
3
Esta resposta não é relevante e não responde à pergunta de forma alguma. A questão era sobre textos do mesmo tamanho renderizados de maneira diferente, não sobre quais unidades usar. O problema realmente permanece, sejam quais forem as unidades usadas.
Rauli Rajande
0

Tive o mesmo problema, parece que no CSS original havia esta linha:

-webkit-text-size-ajustar: 120%;

Tive que mudar para 100% e tudo correu bem. Não há necessidade de alterar todos os px para em ou %%.

me1974
fonte
O designer deve usar em para tamanhos de fonte de qualquer maneira.
Nick Turner
2
... exceto na tag css do corpo onde um tamanho de px é o melhor.
Matt Parkins
0

Verifique também se você não tem uma "largura / altura" definida para os elementos que você está manipulando, o Safari dá precedência de dimensionamento sobre o tamanho da fonte em svg's, Chrome e FF não, ao que parece, pelo menos atualmente.

marebuffi
fonte