When making a mobile-phone page, there is a strange problem: The font display size is inconsistent with the size specified in the CSS

When I recently made a mobile-phone page, I encountered a strange problem: The font display size is inconsistent with the size specified in the CSS. You can view this demo (remember to open chrome DevTools).

As shown, you can find that the originally specified font size is 24px, but the final calculation is 53px, see this bizarre result, my heart cursed a sentence: What a ghost!

Then began to troubleshoot the problem: A label caused? One of the CSS causes? Or a certain sentence JS code caused by. Through a lump of the deletion code, found that seemingly are not. I can't help but scold, what the hell! However, there are some clues in the middle: when the number of labels or the number of text in a page is greater than a certain value, or when the font size of the CSS definition falls within a certain interval, the problem is triggered. Also, the value of the font becomes larger and changes with the original defined font size.

Then nature is a variety of search, finally have a new discovery. Originally this feature is called to do "text autosizer", also known as "font boosting", "font inflation", is Webkit to the mobile browser provides a feature: when we browse the Web on the phone, it is likely because the original page width is large, When you zoom out on your phone screen, you can't see the text. And the font boosting feature at this point will automatically be the text font size, to ensure that there is no need to swipe left and right, and do not need to double-click to enlarge the screen content, but also allows people to easily read the text on the page.

However, this feature is not always necessary, it is good to find the cause of the problem at the same time, we also discussed the problem of some of the treatment options:

1. The viewport width=320 is manually specified, and the Font boosting is not triggered. (You can see later, this statement is not rigorous, when the other settings are the default value, this article is valid)
2. Font boosting only works in an unqualified text stream, specifying a wide height for the element to prevent the font boosting from being triggered.
3. Obviously the 2nd option is flawed, and the text content cannot all be specified as wide. But fortunately, we have to appoint Max-height, Min-height, Min-width, Max-width (after @Ovaldi, only max-height effective) is also possible. For example, body * {max-height:999999px;} can disable the Font boosting feature without side effects. Of course, I don't think it's necessary to use a universal selector, like P {max-height:999999px;}, which may be better.

Here, we understand the problem, and there are solutions. But one problem still bothers me: when the font is larger than a certain value (such as when the viewport width is not specified, the phone screen width=320, the font is greater than or equal to 82px), the font boosting will never be triggered. What is the logic of how Chrome is calculated?

When making a mobile-phone page, there is a strange problem: The font display size is inconsistent with the size specified in the CSS