CSS et la bizarrerie de taille de police de Safari

Il a été observé que Safari sur les iPhones affiche des écarts inattendus de taille de police. Plus précisément, le texte avec des tailles de police plus petites (par exemple, 13 px) apparaît plus grand que celui avec des tailles de police plus grandes (par exemple, 15 px). Ce comportement déroutant soulève la question : existe-t-il des facteurs liés au CSS ou à d'autres facteurs responsables des remplacements de taille de police par Safari ?

Pour résoudre ce mystère, il est essentiel de comprendre un aspect crucial de Safari sur les appareils mobiles. En tant que mesure conviviale, Mobile Safari ajuste automatiquement la mise à l'échelle du texte lorsqu'il détecte le risque d'un rendu de texte trop petit. Il s'agit d'une tentative d'améliorer la lisibilité, en particulier sur les écrans d'iPhone plus petits. Pour surmonter cet ajustement automatisé, une propriété CSS vient à la rescousse : -webkit-text-size-adjust.

Voici un exemple pratique pour éliminer la confusion concernant la taille de police pour les utilisateurs d'iPhone :

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

Cet extrait CSS cible tous les appareils mobiles avec une largeur maximale de 480 px (c'est-à-dire les appareils iPhone) et désactive la mise à l'échelle automatique du texte de Safari dans l'élément

En conclusion, la mise à l'échelle automatique du texte de Mobile Safari vise à optimiser la lisibilité sur des écrans plus petits. Cependant, cela peut entraîner des comportements inattendus en matière de taille de police. En utilisant la propriété -webkit-text-size-adjust, les développeurs peuvent reprendre le contrôle de la taille des polices et garantir un affichage cohérent du texte sur différents appareils, y compris les iPhones.