Pourquoi mon texte s'affiche-t-il plus grand que prévu dans Safari sur iPhone ?

Incohérences de taille de police dans Safari sur iPhone

Malgré la définition de tailles de police explicites, vous pouvez rencontrer des cas où Safari sur iOS affiche certains textes plus grands que prévu, même lorsque la valeur de taille de police est plus petite. Cette anomalie peut être attribuée au comportement par défaut de Safari consistant à redimensionner automatiquement le texte jugé trop petit pour être lisible sur les appareils mobiles.

Résoudre le problème avec -webkit-text-size-adjust

Pour contourner ce problème, vous pouvez utiliser la propriété CSS -webkit-text-size-adjust. En définissant -webkit-text-size-adjust: 100%; sur votre élément body, vous demandez à Safari sur iPhone de respecter les tailles de police spécifiées, annulant sa mise à l'échelle automatique. Voici un exemple d'implémentation :

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

Cette requête multimédia cible les appareils d'une largeur maximale de 480 pixels, garantissant que la propriété -webkit-text-size-adjust s'applique uniquement aux écrans d'iPhone. En désactivant la mise à l'échelle automatique de Safari dans cette requête multimédia, vous pouvez vous assurer que tout le texte, quelle que soit sa taille de police, sera rendu comme spécifié dans votre feuille de style.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!