Certaines tailles de police sont rendues plus grandes sur Safari (iPhone)

Existe-t-il des CSS ou d'autres raisons pour lesquelles Safari / iPhone ignorerait certains paramètres de taille de police? Sur mon site Web particulier, Safari sur l'iPhone rend une taille de police: 13px texte plus grand que la taille de police: texte 15px. Ne prend-il pas en charge la taille de police sur certains éléments?

La réponse de Joe contient quelques bonnes pratiques, mais je pense que le problème que vous décrivez est centré sur le fait que Mobile Safari met automatiquement à l'échelle le texte s'il pense que le texte sera rendu trop petit. Vous pouvez contourner ce problème avec la propriété CSS -webkit-text-size-adjust. Voici un exemple de la façon d'appliquer cela à votre corps, juste pour l'iPhone:

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

Utilisez 100% au lieu de Aucun.

normalize.css inclut ceci

Assurez-vous également que vous définissez le paramètre de zoom initial sur 1 dans votre balise Meta Viewport:

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

Je n'utilise plus les définitions de pixels car elles sont vraiment déroutantes et ne sont pas exactement les mêmes dans les services visuels.

Rencontrez les unités

1. «Ems» (em): «em» est une unité évolutive utilisée dans les supports de documents Web. Un em est égal à la taille de police actuelle, par exemple, si la taille de police du document est de 12pt, 1em est égal à 12pt. Les Ems sont de nature évolutive, donc 2em équivaudrait à 24 pt, 0,5em équivaudrait à 6 pt, etc. Les Ems sont de plus en plus populaires dans les documents Web en raison de leur évolutivité et de leur nature conviviale pour les appareils mobiles.
2. Pixels (px): Les pixels sont des unités de taille fixe qui sont utilisées dans les supports d'écran (c'est-à-dire à lire sur l'écran de l'ordinateur). Un pixel est égal à un point sur l'écran de l'ordinateur (la plus petite division de la résolution de votre écran). De nombreux concepteurs Web utilisent des unités de pixels dans les documents Web afin de produire une représentation au pixel près de leur site tel qu'il est rendu dans le navigateur. L'un des problèmes de l'unité de pixels est qu'elle ne s'adapte pas à la hausse pour les lecteurs malvoyants ou à la baisse pour s'adapter aux appareils mobiles.
3. Points (pt): Les points sont traditionnellement utilisés dans les supports d'impression (tout ce qui doit être imprimé sur papier, etc.). Un point est égal à 1/72 de pouce. Les points ressemblent beaucoup aux pixels, en ce sens qu'ils sont des unités de taille fixe et ne peuvent pas être mis à l'échelle.
4. Pourcentage (%): l'unité de pourcentage ressemble beaucoup à l'unité «em», à l'exception de quelques différences fondamentales. Tout d'abord, la taille de police actuelle est égale à 100% (soit 12 pt = 100%). Lorsque vous utilisez l'unité de pourcentage, votre texte reste entièrement évolutif pour les appareils mobiles et pour l'accessibilité.

J'ai eu le même problème, il s'avère que dans le CSS d'origine, il y avait cette ligne:

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

J'ai dû le changer à 100%, et tout s'est bien passé. Pas besoin de changer tous les px en em ou %%.

Vérifiez également si vous n'avez pas défini de "largeur / hauteur" pour les éléments que vous manipulez, Safari donne la priorité au dimensionnement sur la taille de la police dans les svg, Chrome et FF ne le font pas, semble-t-il, du moins actuellement.