how to override font boosting in mobile chrome

问题:

Is it possible to override font boosting in mobile chrome? I searched the internet before ~including stackoverflow~.

I found that some people say it's impossible, and I also found meta tag that helped the text but also decreased the area of the text... which is not good..

Will appreciate your help..

回答1:

adding following line to my reset.css worked for me

    html * {max-height:1000000px;}

回答2:

There is no real possibility for disabling font boosting. There may be some hacks, but they are meant for something different and, in fact, do something different.

回答3:

It looks like there are a few people that have methods for making it work.

Add some CSS rules or give parent element width and height.

回答4:

Matt and Kundan Sankhe answer are the best solution at the moment.

.element { max-height: 999999px; }

If the problem still occur try add this inside the head tag:-

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

But bear in mind that this can cause problem to image tag or image background-size tag.

回答5:

It is a webkit official bug. You can check on Webkit official site

You have to target only specific element where you have to override font boosting rather than targeting unwanted elements. i.e.

p {
   max-height: 999999px;
}

回答6:

For desktops, and likely mobile (haven't tested mobile), you can disable font size boosting in Chrome and FF by setting a base font size on the HTML element. For example:

html {
  font-size: 16px;
}

This is less hacky than max-height. But, still dirty from an accessibility standpoint.

You can also use jQuery to set this if you have to.

回答7:

Android Chrome only applies font boosting to elements with dynamic height. As soon as you specify a height,max-height or line-height, font boosting is not applied. But you should be careful of the inline element like span whose height or max-height property is invalid. In that case you can set the display to inline-block as the below code or other box types whose height can be setted.
span { font-size:12px; line-height:12px; display:inline-block; }