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
Chrome on Android resizes font
提问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 错误中有详细描述。目前没有办法禁用它。