Incohérences de rendu de la taille des caractères sur un iPhone

Question

Je teste mon site web et il fonctionne bien sur tous les navigateurs, à l'exception du navigateur iphone (je pense que c'est le Safari mobile ?) qui rend un morceau de texte avec une police plus grande que le reste. J'ai vérifié le CSS à la main et en utilisant firebug sur la page et je peux confirmer que j'ai mis la même taille pour tous. Comment puis-je résoudre ce problème ?

Answer 1

Pour améliorer légèrement l'idée de Lukasz, essayez d'utiliser la règle suivante dans votre CSS :

body {
    -webkit-text-size-adjust: 100%;
}

L'utilisation de la valeur "100%" au lieu de "none" permet à tous les autres navigateurs basés sur Webkit de redimensionner le texte lors de l'utilisation de la fonction de zoom tout en conservant la taille de police d'origine.

Ce problème ne se pose que dans les navigateurs modernes comme Safari et Opera avec un appareil iPhone. La solution est

Ajoutez ce style au -webkit-text-size-adjust : 100% ; ou -webkit-text-size-adjust : none ; avec la classe requise, cela fonctionne bien. Exemple : Je veux que la condition soit appliquée uniquement lorsque la demande provient d'un mobile. J'ai donc ajouté le chemin de navigation complet qui répond à mon exigence.

.mobile-phone .authenticated-page.authenticated.mobile-community.mobile-document .notification .notification-dialog.content-frame 
{
    -webkit-text-size-adjust: none;
}

ou

.mobile-phone .authenticated-page.authenticated.mobile-community.mobile-document .notification .notification-dialog.content-frame {
-webkit-text-size-adjust: 100%;

} les deux fonctionneront parfaitement. Il n'est pas nécessaire d'appliquer les styles pour le corps complet

Answer 2

Mobile Safari essaie d'adapter le contenu pour qu'il soit lisible à l'écran par défaut - il a des styles par défaut différents de ceux des autres navigateurs.

Je ne connais pas les règles exactes, mais en ce qui concerne la taille des caractères, il semble que cela fonctionne comme suit :

• Texte à l'intérieur d'un paragraphe, d'un élément de liste ou d'un autre élément "texte" : Appliquer le style de l'auteur sans l'adapter.

• Texte à l'intérieur d'un DIV ou d'un autre élément non spécifique : Traiter comme du "texte brut" et "adapter" la taille en fonction des règles de Mobile Safari.

En résumé, il s'agit de placer votre texte dans un paragraphe et d'appliquer la règle de la taille des caractères à ce paragraphe.

Voici un exemple simple et rapide :

<!-- Recommended: Put this in an external stylesheet -->
<style type="text/css">
    p { font-size:10px; }
</style>

<div class="appro_body">
  <p>SAN BENEDETTO - Si è ufficialmente aperta la campagna elettorale per le 
    comunali di San Benedetto del Tronto 2011. Le elezioni regionali, oramai
    dietro le spalle, sembra siano servite più che per organizzare il 
    territorio in crisi, per muovere le pedine in vista delle elezioni a 
    Sindaco.
    ...
    <a href="http://www.ilsegnale.it/it/news/approfondimento/1602/?tpl=502">Leggi tutto...</a>
  </p>
</div>

(évidemment, vous devez déplacer le font-size au fichier CSS).

Answer 3

J'ai réglé ce même problème avec :

<meta name="viewport" content="width=device-width">

Desde HTML5Boilerplate actuellement, c'est aquí

Answer 4

Mettez une telle règle dans votre CSS et votre problème disparaît :

body {
    -webkit-text-size-adjust: none;
}

EDIT : Une meilleure solution fourni par utilisateur612626 est d'utiliser 100% au lieu de none .

Answer 5

Donner le corps font-size:100% , puis utilisez la méthode "em" pour donner la taille de la police à chaque élément de votre site Web.

Cela rendra la taille de la police 100% de la taille de police par défaut du navigateur concerné. Par exemple, le navigateur iPhone safari a 12px = 1em (bien sûr, vous devez vérifier la taille de la police par défaut localement). Donc, si vous voulez avoir une taille de police de 10px, il suffit de la diviser par 12, c'est-à-dire "0,83em".

J'espère que vous comprenez, cherchez aussi "css em unit" vous aurez un meilleur aperçu.