Thursday 9 January 2014

Disable font autosizing in Chrome on Android

Chrome on Android has a feature called 'Font Boosting' which resizes text to make it larger once a paragraph of text reaches certain length. This maybe useful for a reader but also can destroy a layout of your web page.

Unfortunately there is no 'official' way to disable Font Boosting. So you end up with part of your page having huge text and part of it having normal font size. Thankfully there is a workaround for that.

After closer examination it turned out that Chrome for Android resizes a text of an element only if it has dynamic height. So disabling Font Boosting is as simple as adding max-height css property to an element, for example:

p {
   max-height: 999999px;

As far as I know this fix has no side-effects.

1 comment:

  1. Hi there, one another solution is to apply the following CSS rules:

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