The font size of large paragraphs of text increases due to the dynamic setting of viewport on the mobile terminal
The reason why the font size of large paragraphs of text increases due to the dynamic setting of the viewport on the mobile terminal is not a bug, but a feature provided by Webkit to the mobile browser: when we browse the web on the mobile phone, it is probably because the original page width is large , After zooming out on the phone screen, the text in it will become invisible. This feature is called Font Boosting, also known as Text Autosizer, Font Inflation. The Font Boosting feature will automatically increase the font size of the text at this time, ensuring that people can easily read the text on the page without sliding the screen left or right, and without double-clicking to enlarge the screen content.
The reason for this feature is because:
-
In the case of mobile page scaling (initial-scale!=1), Chrome may re-adjust the font size;
-
Valid in text stream of unrestricted size
solution
-
Font Boosting is only effective in the text stream of unrestricted size. Specifying the width and height of the element can prevent Font Boosting from being triggered
-
You can avoid triggering by specifying max-height. For example. class {max-height:99999px;}
-
.class{ -webkit-text-size-adjust:none;}
-
Specify initial-scale = 1