Chrome on Android Resizes Font

Why is paragraph text shrinking in Chrome for Mobile?

Can you check if your Chrome font size is at 100% in settings on your phone? Chrome for Android has an option to render font at a different value. You can find this option in: Menu -> Settings -> Accessibility. I did a mistake like this some weeks ago and I want to be sure that is not the case here. Sorry if I'm out of the line here.

I also found that for some unknown reason sometimes Chrome for Android set this font setting wrong at installation time. I could not replicate this behavior but I got one phone, of a relative, with this so it might be possible that you are not aware of the fact that this setting is not set at 100%.

Mobile Chrome: Wrong 'font-size' when using 'height' property

It seems this is a known problem how mobile browsers handle text sizing. See text-size-adjust. There are several options for this:

  1. <meta name="viewport" content="width=device-width, initial-scale=1">
  2. Working with the experimental property
  3. Setting a min-height of 1px or max-height of 99999. It seems that this will break layout on some mobile devices. (See post: Chrome on android resizes font)

how to override font boosting in mobile chrome

adding following line to my reset.css worked for me

    html * {max-height:1000000px;}

Android Chrome ignoring -webkit-text-size-adjust:none property. Text is being scaled when zoomed out

Note that the -webkit-text-size-adjust property you mention is non-standard. Read more about it here.

Currently Chrome for Android scales text using font boosting and there's no way to disable it.

If you want a way to disable font boosting, please provide your use-case and log an issue via new.mcrbug.com.

Foundation CSS font sizing issue (Chrome on Android)

This problem is caused by Chrome for Android implementing "font boosting" (this may apply to webkit browsers in general, but I haven't experienced the problem anywhere else).

Basically, in order to attempt to increase the legibility of web pages on a mobile browser, Chrome will auto-magically increase the font size of a paragraph (so that the user doesn't have to zoom in to read it). However, this is only applied to paragraphs over a certain length, causing longer paragraphs to display in a much larger font size to their context.

This can't be disabled in Chrome. However there are a couple of possible fixes (discussed in this SO question) that can be applied that will stop it from attempting to 'boost' the font sizes. These generally boil down to either:

1. Explicitly specify the height dimensions of the <p> element.

This can be done by applying max-height: 999999px or min-height: 1px to the paragraph. However, this reportedly causes scaling issues in some browsers (e.g. Safari).

2. Explicitly specify the dimentions of the view frame.

Adding the following tag in the <head> section does this:

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

This disables font boosting and fixes the problem in the original question.



Related Topics



Leave a reply



Submit