Chrome on Android resizes font

android html css google-chrome font-size

45,783

Solution 1

Add max-height: 999999px; to the element you want to prevent font boosting on, or its parent.

Solution 2

Include the following <meta> tag in the document <head>:

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

This will correctly establish the view frame, and thus eliminate the need for "FontBoosting".

Solution 3

There is now a CSS property you can set to control this:

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

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

Solution 4

Put this in your reset. html * {max-height:1000000px;}

Solution 5

After some tests this rule helped me out. Must be added either to the element containing boosted text or it's parent depending on the div/table structure.

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

Maybe the width and heigth values must be corrected according your needs.

View more solutions

45,783

Author by

Sprax

Updated on May 22, 2020

Comments

Sprax almost 4 years

Apparently once paragraph of text reaches a certain length, Google Chrome on Android decides to resize the text and make it larger (causing all kinds of fun). Now I have a website where about half of the p-tags follow the size I've set and the other half change as they please - apparently depending on the length of the paragraph.

How on earth do I fix this?
moeffju over 10 years

Android Chrome only applies font boosting to elements with dynamic height. As soon as you specify a height or max-height, font boosting is not applied. Setting max-height to a large number is simple and should have no side effects.
Paul Irish over 10 years

This is definitely the preferred solution. If you care about how things look in mobile, then take ownership of your viewport!
Ed_ over 10 years

This doesn't disable font boosting, though.
Dizzley over 10 years

It certainly corrects unwanted scaling and I am going to use it in future.
Sam over 10 years

As a note, I have <meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no"> and I'm still getting Chromes awful scaling
James McDonnell over 10 years

Just a warning for this. This solved the problem I had with Chrome fonts on android not playing nice. However it broke the ipad view of the site on specific versions of ios.
James McDonnell over 10 years

As well as it caused some issues on ipad for css3 transitions.
Jen over 10 years

That's better because the font is legible. It's maintaining proportion while increasing size for legibility. Perfect for me.
Dilip Rajkumar about 10 years

This works but it has an issue, your website loads with full width and height instead of fit to browser window. It mainly causes problem in vertical orientation.
Radley Sustaire almost 10 years

Using this significantly breaks the layout of many elements in Safari (5.1.7), even if you are not utilizing max-height or defined heights to begin with. A few sites were completely unusable, all of the structural div elements were collapsed awkwardly to the top of the page. Do not "blanket" your site with a max-height definition! Use only where needed, and test thoroughly.
moeffju almost 10 years

@RadGH can you try using {min-height:1px;} instead?
Radley Sustaire almost 10 years

@moeffju Using min-height in the same situation does not break safari. I can't test if it disabled font boosting anymore though. According to [Bug 84186 ](bugs.webkit.org/show_bug.cgi?id=84186), the parent or grandparent (but not higher) "must have a max-height greater than the original element" in order to disable font boosting. I cannot confirm if this is actually the case.
nealmcb about 9 years

Thanks - this seems to work well. But I'm aghast that plain old-fashioned web 1.0 sites are rendered so poorly by modern mobile browsers, and considered "non-responsive" and "broken" by google. isitvivid.com/blog/google-penalty-non-responsive-websites
Sabrina Leggett over 8 years

was causing issues with me for sticky footer, had to do html body * instead
Stepan Yakovenko about 7 years

text-size-adjust: none worked for me on lastest android chrome.
Chase almost 6 years

Whelp... Just when I thought I'd seen it all... Another crazy glitch with another crazy fix. FWIW I'm not seeing any issues in Safari, and min-height: 1px unfortunately had no effect. max-height: 999999px does the trick though. My case was very long content transitioning during route entry/leave. Font boosting happened either during or just after the transition, not sure which, but it caused a very noticeable shift.
Chase almost 6 years

Looks like it is indeed font boosting but it can be prevented by setting max-height: 999999px as @moeffju described.
Chase almost 6 years

This is a little too aggressive, unless you're actually experiencing an issue in many unpredictable elements. Otherwise it'd be better to target only the problem elements.
Ed_ almost 6 years

@Chase - in my case they were unpredictable (dynamic) elements, so we did have to use a * approach. That said, I'd argue this is one of those obscure things that you'd likely forget about and may cause problems in future, so for maintainability I'd probably have left it at * even if at the time it was just one/a few elements.
Chase almost 6 years

Right after I found this thread and commented, I started seeing additional issues I suspected were related to font boosting. So, sure enough (at least for now) there's a * max-height... in my code LOL
jpp about 5 years

This is the preferred solution if you are using a gas deployed as web app.
Silver Moon almost 5 years

@moeffju this works indeed, where did you find this solution ? what is the source.
JustAMartin about 4 years

In my case it alone did not work - the font was nicely readable in short paragraphs, but unexpectedly small in longer paragraphs. I had to add text-size-adjust: none to prevent Android Chrome from decreasing text size for the longer paragraphs.
Michael Scheper over 2 years

@Sam: user-scalable=no is a great way to make people who don't have perfect vision leave your site, especially if nobody checks whether images are at all viewable on a small screen. FireFox on Android has an option for overriding this, for good reason.