问题
Apparently once paragraph of text reaches a certain length, 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?
回答1:
Add max-height: 999999px; to the element you want to prevent font boosting on, or its parent.
回答2:
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".
回答3:
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
回答4:
Put this in your reset. html * {max-height:1000000px;}
回答5:
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.
回答6:
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).
回答7:
This is called "font boosting" and is described in some detail in this WebKit bug. There's currently no way to disable it.
来源：https://stackoverflow.com/questions/11289166/chrome-on-android-resizes-font