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

110

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?

css safari mobile-safari font-size Alex
la source

Réponses:

248

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;
  }
}
David Kaneda
la source
2
Je viens de rencontrer ce problème. Ce petit hack d'écran multimédia fonctionne parfaitement. Je vais commencer à l'intégrer dans mon fichier de démarrage CSS.
Throttlehead
1
Wow, malade! Cela me rend fou, j'ai même essayé de changer le nom de la classe et de définir le CSS en ligne avec jQuery avant de trouver cela. Gareautrain!
Christoffer Bubach
1
Cela a beaucoup aidé. Cheers :)
Dead Man
2
Assurez-vous d'utiliser la requête multimédia. Il semble que cela puisse rendre certains textes difficiles à lire: Attention à -webkit-text-size-
Adjust
9
La réponse doit être mise à jour sur -webkit-text-size-adjust: 100%- cela évite la mise à jour automatique, mais permet un zoom lancé par l'utilisateur. (source)
Shawn Erquhart
11

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;" />
johnpolacek
la source
7

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é.

la source
4
La réponse est d'utiliser 1 unité prédéfinie pour le texte (c'est-à-dire 12pt), puis pour toutes les définitions css suivantes, utilisez la taille de la police: 90%; ou taille de la police: 110%; etc. Ceci est plus facilement accessible pour tous vos appareils pris en charge.
1
Vous avez oublié le plus important: REM (référence EM). Vous pouvez l'utiliser dans tout le document et cela reste le même (ce n'est pas en cascade).
Andrew Swift
3
Cette réponse n'est pas pertinente et ne répond en aucun cas à la question. La question portait sur les textes de même taille rendus différemment, pas sur les unités à utiliser. Le problème reste vraiment là quelles que soient les unités utilisées.
Rauli Rajande
0

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 %%.

moi1974
la source
Le concepteur doit de toute façon utiliser em pour les tailles de police.
Nick Turner
2
... sauf dans la balise body css où une taille px est la meilleure.
Matt Parkins
0

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.

marebuffi
la source