Corriger le problème de la taille des polices sur Mobile Safari (iPhone) où le texte est rendu de manière incohérente et où certaines polices sont plus grandes que d'autres ?

Question

La taille des caractères de notre site n'est pas la même sur Safari mobile et, pour autant que nous le sachions, uniquement sur Safari mobile. Cette situation nous a laissés perplexes.

Nous avons analysé le site avec Firebug, et les zones incorrectes héritent des bons styles, mais les polices sont toujours rendues avec les mauvaises tailles.

1) Visite http://www.panabee.com .

2) Effectuez une recherche pour un nom de domaine.

Les cases sur le côté gauche montrent les tailles de police incorrectes. La taille de la police doit correspondre à celle de la partie droite (titres et texte des boîtes). Par exemple, les titres "Variations" et "Twitter" sont beaucoup plus grands que le titre "Fin alternative".

Vous savez pourquoi ?

Answer 1

Mobile Safari (comme Chrome pour Android, Mobile Firefox et IE Mobile) augmente la taille de la police des blocs larges (à tout moment), de sorte que si vous double-cliquez pour zoomer sur ce bloc (ce qui adapte le bloc à la largeur de l'écran), le texte sera lisible. Si vous définissez -webkit-text-size-adjust: 100% (o none ), il ne sera pas en mesure de le faire, et donc, lorsqu'un utilisateur tapera deux fois pour zoomer sur de larges blocs, le texte sera illisible et petit ; les utilisateurs pourront le lire s'ils font un zoom par pincement, mais le texte sera alors plus large que l'écran et ils devront faire un panoramique horizontal pour lire chaque ligne de texte !

1. Idéalement, vous devriez résoudre ce problème en utilisant Conception Web réactive des techniques permettant d'adapter votre conception à la taille des écrans mobiles (dans ce cas, vous n'auriez plus de blocs très larges, de sorte que les navigateurs mobiles n'ajusteraient plus la taille de vos polices).

2. Si ce n'est pas possible et que vous êtes contraint de proposer un site de bureau aux utilisateurs mobiles, essayez de modifier votre conception de manière à ce qu'aucun de vos blocs de texte ne soit plus large que la largeur de l'appareil mobile (par exemple 320px pour de nombreux téléphones portrait) (vous pouvez utiliser des css spécifiques aux mobiles pour éviter d'affecter les navigateurs de bureau). Mobile Safari n'aura alors pas besoin d'augmenter la taille des polices (et les navigateurs qui font refluer le texte, comme Android Browser et Opera Mobile, n'auront pas non plus besoin de modifier votre mise en page).

3. Enfin, si vous vraiment Si vous souhaitez empêcher Mobile Safari de modifier la taille des polices, vous pouvez définir les paramètres suivants -webkit-text-size-adjust: 100% mais faites ceci uniquement en dernier recours car les utilisateurs mobiles risquent d'avoir des difficultés à lire votre texte, car il sera soit trop petit, soit ils devront faire un panoramique d'un côté à l'autre après chaque ligne lue. Notez que vous devez utiliser 100% pas none parce que aucun n'a d'effets secondaires désagréables dans les navigateurs de bureau . Il existe également des équivalents -moz-text-size-adjust y -ms-text-size-adjust propriétés pour Mobile Firefox et IE Mobile.

Edit : par exemple dans votre cas le plus simple est probablement la 2ème alternative, vous pourriez donc essayer d'ajouter le CSS suivant :

/* Mobile browsers only */
@media only screen and (max-device-width: 480px) {
    table#all_results {
        width: auto;
    }
    td#main_box {
        width: 320px;
    }
    td#side_box {
        width: 320px;
    }
}

Ce n'est pas l'idéal de coder en dur 320px comme cela ; vous pouvez améliorer cela en utilisant une variété de requêtes média CSS, ou en obtenant la largeur du dispositif à partir de JavaScript.

Answer 2

Voici ce qui a finalement fonctionné (testé uniquement sur l'iPhone 4) :

/* Mobile browsers only */
@media only screen and (max-device-width: 480px) {      
        td#main_box { -webkit-text-size-adjust:100% }               
}

Nous avons attribué la réponse à John puisque sa solution était la base de celle-ci.

Ce n'est sans doute pas la réponse la plus élégante, mais elle fonctionne.

Answer 3

-webkit-text-size-adjust: none; ne vous permettra pas de zoomer sur les appareils mobiles. Vous devez utiliser 100% à la place.

Answer 4

-webkit-text-size-adjust:none;

résoudra probablement votre problème.

target-element { -webkit-text-size-adjust:80% } 

va toujours zoomer, mais il reste 80% plus petit que la valeur par défaut de webkits.

Answer 5

Dans mon cas, j'avais un <p> et j'ai résolu ce problème en ajoutant :

width: fit-content;

A elle. J'ai pu reproduire ce phénomène sur Safari mobile également.