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:
<meta name="viewport" content="width=device-width, initial-scale=1">
- Working with the experimental property
- 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
How to Change Firebase Project Directory
Sharing Link on Whatsapp from Mobile Website (Not Application) For Android
Android Webview & Localstorage
How to Pass Data Between Activities in Android Application
Strange Outofmemory Issue While Loading an Image to a Bitmap Object
How to Use Sharedpreferences in Android to Store, Fetch and Edit Values
How to Clear Livedata Stored Value
How to Create a Folder in Android External Storage Directory
Android Sqlite: How to Retrieve Specific Data from Particular Column
Passing an Arraylist of Objects to the New Activity
How to Open Local Pdf File in Webview in Android
Change Button Text Color When Pressed
How to Display HTML in Textview
Navigating to Previous Fragment Without Reloading It