web-dev-qa-db-fra.com

Chrome on Android redimensionne la police

Apparemment, une fois que le paragraphe de texte atteint une certaine longueur, chrome on Android décide de redimensionner le texte et de l'agrandir (ce qui provoque toutes sortes de plaisir). Maintenant, je avoir un site Web où environ la moitié des p-tags suivent la taille que j'ai définie et l'autre moitié change à leur guise - apparemment en fonction de la longueur du paragraphe.

Comment diable puis-je résoudre ce problème?

androidhtmlcssgoogle-chromefont-size
75
Sprax

Ajouter max-height: 999999px; à l'élément sur lequel vous souhaitez empêcher l'augmentation de la police ou à son parent.

86
moeffju

Inclure les éléments suivants <meta> balise dans le document <head>:

<meta name="viewport" content="width=device-width, initial-scale=1">

Ceci établira correctement le cadre de vue et éliminera ainsi le besoin de "FontBoosting".

57
Joe DeRose

Il y a maintenant une propriété CSS que vous pouvez définir pour contrôler cela:

-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;

Voir https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust

19
Gareth

Mettez cela dans votre réinitialisation. html * {max-height:1000000px;}

13
Ed Hinchliffe

Après quelques tests, cette règle m'a aidé. Doit être ajouté à l'élément contenant du texte boosté ou à son parent selon la structure div/table.

element or parent element { 
    /* prevent font boosting on mobile devices */
    width: 100%;
    height: auto;
    min-height: 1px;
    max-height: 999999px;
}

Peut-être que les valeurs de largeur et de hauteur doivent être corrigées en fonction de vos besoins.

5
metamagikum

J'ai trouvé une solution pour mes pages: donnez à l'élément parent une largeur et une hauteur! La police ne sortira pas de ces bordures et restera donc petite (euh).

2
Randy Vroegop

Ceci est appelé "renforcement des polices" et est décrit en détail dans ce bogue WebKit . Il n'y a actuellement aucun moyen de le désactiver.

1
Boris Smus