Android 上的 Chrome 调整字体大小

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11289166/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-20 06:45:44  来源:igfitidea点击:

Chrome on Android resizes font

androidhtmlcssgoogle-chromefont-size

提问by Sprax

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.

显然,一旦文本段落达到一定长度,Android 上的谷歌浏览器就会决定调整文本大小并使其变大(引起各种乐趣)。现在我有一个网站,其中大约一半的p-tags 遵循我设置的大小,另一半则随心所欲地更改 - 显然取决于段落的长度。

How on earth do I fix this?

我到底该如何解决这个问题?

回答by moeffju

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

添加max-height: 999999px;到要防止字体增强的元素或其父元素。

回答by Joe DeRose

Include the following <meta>tag in the document <head>:

<meta>在文档中包含以下标签<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="viewport" content="width=device-width, initial-scale=1">

This will correctly establish the view frame, and thus eliminate the need for "FontBoosting".

这将正确建立视图框架,从而消除对“FontBoosting”的需要。

回答by Gareth

There is now a CSS property you can set to control this:

现在你可以设置一个 CSS 属性来控制它:

-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

请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust

回答by Ed Hinchliffe

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

把它放在你的重置中。 html * {max-height:1000000px;}

回答by metamagikum

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.

经过一些测试,这条规则帮助了我。必须添加到包含增强文本的元素或其父元素,具体取决于 div/table 结构。

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.

也许必须根据您的需要更正宽度和高度值。

回答by Randy Vroegop

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

我为我的页面找到了一个解决方案:给父元素一个宽度和高度!字体不会超出这些边界,因此它会保持较小(呃)。

回答by Boris Smus

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

这称为“字体增强”,在此WebKit 错误中有详细描述。目前没有办法禁用它。