Skip to content Skip to sidebar Skip to footer
Home / Android / Browser / Html

Why Does The Font In These TD Elements Render At Different Sizes?

Post a Comment
Here is a simple table with 2 TDs. http://z5h.github.io/broken_render/broken.html On recent Chrome / Firefox on Android they render at VERY different sizes. I'm not clear why. On D

Solution 1:

What you're seeing is Chrome for Android's "helpful" font boosting feature. There's no guaranteed way to disable it.

If you open the page in the normal Android browser (or anything using a WebView), you won't see this effect.


Solution 2:

Most mobile browsers try to detect the main content of the page and enlarge it so that the user wont have to zoom in on pages without an explicit mobile design, this is called "Text Inflation" and is controlled by the text-size-adjust CSS property in most cases.

Stolen syntax example from the above link:

text-size-adjust: none               /* text is never inflated */
text-size-adjust: auto               /* text may be inflated */
text-size-adjust: <percentage>       /* text may be inflated of this exact proportion */

Please note that the text-size-adjust property is not standardized, and thus may have to be prefixed with -webkit-, -moz-, and other browser vendors' prefixes.

Also, not to be confused with font-size-adjust. :-)


Solution 3:

I had a similar problem with irregular resizing of text on handhelds. I solved it by adding following three lines inside <head></head>.

<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

Read more about the viewport meta-tag here: http://davidbcalhoun.com/2010/viewport-metatag
Hopefully this was of some help.
Good luck!


Post a Comment for "Why Does The Font In These TD Elements Render At Different Sizes?"