web-dev-qa-db-fra.com

Certaines polices sont plus grandes sur Safari (iPhone)

Existe-t-il des raisons CSS ou autres pour lesquelles Safari/iPhone ignore certains paramètres de taille de police? Sur mon site Web particulier, Safari sur l'iPhone affiche une taille de police: texte de 13 pixels supérieur à la taille de police: texte de 15 pixels. Est-ce que cela ne prend peut-être pas en charge la taille de police de certains éléments?

csssafarimobile-safarifont-size
94
Alex

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

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

Assurez-vous également que vous définissez le paramètre de zoom initial sur 1 dans la balise méta de la fenêtre d'affichage:

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

Utilisez 100% au lieu de Aucun.

normalize.css inclut ceci

9
user3276706

Je n'utilise plus les définitions de pixels, car elles sont vraiment déroutantes et ne sont pas exactement les mêmes d'un service à l'autre. 

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 12 pt, 1em est égal à 12 pt. Les ems sont de nature évolutive, donc 2em équivaut à 24 pt, 0,5em à 6pt, 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 utilisées dans les supports d'écran (à lire par exemple 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 aux 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 du 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 redimensionnés.
  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 l'accessibilité.
8
Joe Garrett

J'ai eu le même problème, se trouve dans le CSS original il y avait cette ligne

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

Je devais le changer à 100%, et tout était lisse. Pas besoin de changer tous les px en em ou %%.

0
me1974

Vérifiez également que vous n'avez pas défini de "largeur/hauteur" pour les éléments que vous manipulez. Safari donne la priorité au dimensionnement par rapport à la taille de la police dans svg's, Chrome et FF ne le font pas, du moins à l'heure actuelle.

0
marebuffi