web-dev-qa-db-fra.com

Résolution du problème de taille de police sur Mobile Safari (iPhone): le texte est rendu de manière incohérente et certaines polices sont plus volumineuses que d’autres?

Notre site affiche des tailles de police incohérentes sur Safari mobile - et, à notre connaissance, uniquement Mobile Safari. Cela nous a beaucoup déconcertés.

Nous avons analysé le site avec Firebug et les zones incorrectes héritent des styles appropriés, mais les polices sont toujours restituées avec des tailles incorrectes.

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

2) Recherchez un nom de domaine.

Les cases du côté gauche indiquent les tailles de police incorrectes. La taille de la police doit correspondre à celle du côté droit (titres et copie de la boîte). Par exemple, les titres "Variations" et "Twitter" sont beaucoup plus volumineux que le titre "Alternate Endings".

Une idée pourquoi?

iphonecsslayoutmobilemobile-safari
68
Crashalot

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 (qui adapte le bloc à la largeur de l'écran), le texte sera lisible. Si vous définissez -webkit-text-size-adjust: 100% (ou none), cela ne sera pas possible. Ainsi, lorsqu'un utilisateur clique deux fois pour zoomer sur des blocs larges, le texte est illisiblement petit; les utilisateurs pourront le lire s'ils font un zoom avant, mais le texte sera alors plus large que l'écran et ils devront faire un panoramique horizontal pour lire chaque ligne de texte!

  1. Dans l’idéal, vous devriez résoudre ce problème en utilisant techniques de Responsive Web Design pour adapter votre conception à la taille de votre écran (dans ce cas, vous n’auriez plus de blocs très larges, de sorte que les navigateurs mobiles n’ajusteraient plus votre police). tailles).

  2. Si ce n'est pas une option et que vous êtes obligé de servir un site de bureau à des utilisateurs mobiles, voyez si vous pouvez ajuster votre conception afin qu'aucun de vos blocs de texte ne soit plus large que la largeur de l'appareil du périphérique mobile (par exemple, 320 pixels pour de nombreux téléphones portrait ) (vous pouvez utiliser des css spécifiques à votre mobile pour éviter d’affecter les navigateurs de bureau), alors Safari mobile n’aura pas besoin d’augmenter la taille des polices (et les navigateurs rediffusant le texte, comme le navigateur Android et Opera Mobile, n’aurez pas besoin de changer votre mise en page).

  3. Enfin, si vous devez vraiment empêcher Mobile Safari d’ajuster vos tailles de police, vous pouvez définir -webkit-text-size-adjust: 100%, mais procédez comme suit uniquement en tant que dernier recours , car il est probable que les utilisateurs de mobile auront des difficultés à lire votre texte, car il sera trop petit ou devra faire un panoramique horizontal après chaque ligne lue . Notez que vous devez utiliser 100% et non none parce que aucun n'a des effets secondaires désagréables dans les navigateurs de burea . Il existe également des propriétés -moz-text-size-adjust et -ms-text-size-adjust équivalentes pour Mobile Firefox et IE Mobile.

Edit: par exemple, dans votre cas, le plus simple est probablement la 2ème alternative, vous pouvez 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;
    }
}

Bien que ce ne soit pas idéal pour hardcode 320px comme ceci; vous pouvez améliorer cela en utilisant une variété de requêtes de médias CSS ou en obtenant la largeur de périphérique à partir de JavaScript.

141
John Mellor

Voici ce qui a finalement fonctionné (testé uniquement sur 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 car sa solution était à la base de celle-ci.

Ce n’est probablement pas la réponse la plus élégante, mais cela fonctionne.

36
Crashalot

-webkit-text-size-adjust: none; vous empêchera de zoomer sur les appareils mobiles. Vous devriez utiliser 100% à la place.

5
Webreality
-webkit-text-size-adjust:none;

va probablement résoudre votre problème.

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

continue à zoomer mais le garde 80% plus petit que les kits Web.

3
Thomas Maas

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

width: fit-content;

Pour cela J'ai également pu reproduire cela sur Safari Mobile.

0
Christian Adam