web-dev-qa-db-fra.com

Comment éviter l'ajustement automatique de la taille de police iOS?

Je suis PAS parle de zoomer la page, mais plutôt de la façon dont MobileSafari sur iOS augmente parfois certaines tailles de police.

Quand, exactement, est-ce fait? Peut-elle être évitée ou découragée?

cssiosmobile-safari
51
Alan H.

J'ai eu beaucoup de mal à le retrouver, mais: c'est le -webkit-text-size-adjust propriété en CSS.

En savoir plus à ce sujet et d'autres CSS spécifiques à iOS ici .

Valeurs:

  • Pourcentage (de la taille par défaut), par ex. 120%, ou 100%
  • auto (par défaut)
  • none - si auto ne fonctionne pas pour votre page. Cependant, cela cause souvent des problèmes de zoom. Utilisation 100% à la place. Par exemple, ouvrez Safari sur votre bureau et zoomez sur la page (Command-Plus) - votre texte ne sera pas agrandi, même si la page entière a zoomé! N'utilisez pas none!

Notez que ceux-ci peuvent être appliqués non seulement au niveau de la page mais au niveau de l'élément/widget/conteneur.

(Je ne spécifierais pas simplement une valeur de 100% pour mon site Web à moins que je ne sois sacrément sûr qu'il était déjà optimisé pour les petits écrans, et jamais none car cela cause des problèmes.)

Veuillez noter que dans Firefox Mobile (par exemple pour Android et Firefox OS), il existe une propriété similaire, -moz-text-size-adjust, documenté ici . Merci à Costa de l'avoir signalé.

Apparemment, Microsoft en a également une version pour IE mobile: -ms-text-size-adjust.

29
Alan H.
body {
    -webkit-text-size-adjust: 100%;
}

Assurez-vous simplement que tout votre texte est à une taille lisible en premier lieu. L'iPhone et l'iPod touch ont un écran plutôt petit, alors gardez cela à l'esprit également.

81
BoltClock

La réponse acceptée fonctionne, mais dans d'autres navigateurs WebKit, elle verrouille le font-size pour les personnes qui zooment. En utilisant 100% au lieu de aucun fonctionne dans les deux sens:

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