Chrome 在 Android 上调整字体大小

显然，一旦文本段落达到一定长度，安卓系统上的谷歌浏览器就会决定调整文本大小，使其变大(这带来了各种乐趣)。现在我有一个网站，其中大约一半的 p标签遵循我设置的大小，另一半随意变化-显然取决于段落的长度。

我到底该怎么补救？

46888 次浏览

This is called "font boosting" and is described in some detail in this WebKit bug. There's currently no way to disable it.

小开

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).

小开

Add max-height: 999999px; to the element you want to prevent font boosting on, or its parent.

小开

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".

小开

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.

小开

Put this in your reset. html * {max-height:1000000px;}

小开

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