CODEWITHSUNDEEP
cssgoogle-chromefont-size
Ron
Ron

Reputation: 4095

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..

Upvotes: 26

Views: 17005

Answers (8)

fabb
fabb

Reputation: 11745

Try text-size-adjust:

html {
    text-size-adjust: none;
    -ms-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
}

Upvotes: 5

Mark
Mark

Reputation: 1

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.

Upvotes: -2

Bayley Gass
Bayley Gass

Reputation: 1

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; }

Upvotes: -1

phpsmart.info
phpsmart.info

Reputation: 49

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.

Upvotes: 1

Kundan Sankhe
Kundan Sankhe

Reputation: 224

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;
}

Upvotes: 1

Matt
Matt

Reputation: 414

adding following line to my reset.css worked for me

    html * {max-height:1000000px;}

Upvotes: 39

looper
looper

Reputation: 1979

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.

Upvotes: 7

soycharliente
soycharliente

Reputation: 787

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.

Upvotes: 2

Related Questions