web-dev-qa-db-fra.com

Incohérences de rendu de la taille de police sur un iPhone

Je teste mon site Web et fonctionne bien sur tous les navigateurs, à l'exception du navigateur pour iPhone (je pense que c'est Safari mobile?) Qui rend un morceau de texte avec une police plus grande que les autres. 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 chacun d'eux. Comment puis-je réparer ça?

iphonecssbrowserfontsmobile-safari
49
Terix

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 "aucun" permet à tous les autres navigateurs 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 se pose uniquement dans les navigateurs modernes comme safari, opera avec un appareil iPhone. La solution est

Ajoutez ce style avec - webkit-text-size-adjust: 100%; ou -webkit-text-size-adjust: none; avec la classe requise, cela fonctionne bien. Exemple: je souhaite 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 pleinement à mes besoins.

.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 bien. Pas besoin d'appliquer les styles pour un corps complet

166
user612626

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 des autres navigateurs.

Je ne connais pas les règles exactes - mais en ce qui concerne les tailles de police, cela semble fonctionner comme ceci:

  • 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: Traitez comme du 'texte brut' et 'adaptez' la taille selon les règles de Mobile Safari.

Donc - la réponse courte est, enveloppez votre texte dans un paragraphe et appliquez la règle de taille de police à cela.

Voici un exemple rapide et sale:

<!-- 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 règle vers le fichier CSS).

22
Ben Hull

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

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

De HTML5Boilerplate actuellement c'est ici

13
Keith Smiley

Mettez une telle règle dans votre CSS et votre problème a disparu:

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

EDIT: ne meilleure solution , fournie par ser612626 , consiste à utiliser 100% au lieu de none.

12
Lukasz Korzybski

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

Cela fera la taille de la police 100% de la taille de police par défaut par le navigateur respectif. Par exemple, le navigateur Safari iPhone a 12px = 1em (bien sûr, vous devez vérifier la taille de police par défaut localement). Ensuite, si vous voulez avoir une taille de police de 10 pixels, il suffit de la diviser par 12, c'est-à-dire "0.83em"

J'espère que vous comprenez, recherchez également "unité css em", vous obtiendrez une meilleure compréhension.

4
Chandrakant