CSS e peculiaridade de tamanho de fonte do Safari

Foi observado que o Safari em iPhones exibe discrepâncias inesperadas de tamanho de fonte. Especificamente, o texto com tamanhos de fonte menores (por exemplo, 13px) parece maior do que aqueles com tamanhos maiores (por exemplo, 15px). Esse comportamento intrigante levanta a questão: existem fatores relacionados ao CSS ou outros fatores responsáveis ​​pelas substituições de tamanho de fonte do Safari?

Para resolver esse mistério, é essencial compreender um aspecto crucial do Safari em dispositivos móveis. Como uma medida fácil de usar, o Mobile Safari ajusta automaticamente o dimensionamento do texto quando detecta o risco de renderização de texto excessivamente pequena. Esta é uma tentativa de melhorar a legibilidade, especialmente em telas menores de iPhone. Para superar esse ajuste automatizado, uma propriedade CSS vem em socorro: -webkit-text-size-adjust.

Aqui está um exemplo prático para eliminar a confusão de tamanho de fonte para usuários de iPhone:

@media screen and (max-device-width: 480px) {
  body {
    -webkit-text-size-adjust: 100%;
  }
}

Este snippet CSS é direcionado a todos os dispositivos móveis com largura máxima de 480px (ou seja, dispositivos iPhone) e desativa o dimensionamento automático de texto do Safari dentro do elemento

Concluindo, o dimensionamento automático de texto do Mobile Safari visa otimizar a legibilidade em telas menores. No entanto, isso pode levar a comportamentos inesperados no tamanho da fonte. Ao empregar a propriedade -webkit-text-size-adjust, os desenvolvedores podem recuperar o controle sobre o tamanho da fonte e garantir a exibição consistente do texto em diferentes dispositivos, incluindo iPhones.