Chrome on Android resizes font
AndroidHtmlCssGoogle ChromeFont SizeAndroid Problem Overview
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?
Android Solutions
Solution 1 - Android
Add max-height: 999999px; to the element you want to prevent font boosting on, or its parent.
Solution 2 - Android
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 - Android
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 - Android
Put this in your reset. html * {max-height:1000000px;}
Solution 5 - Android
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.
Solution 6 - Android
I found a solution for my pages: give the parent element a width and height! The font will not go outside those borders, and so it will remain small(er).
Solution 7 - Android
This is called "font boosting" and is described in some detail in this WebKit bug. There's currently no way to disable it.