Android Chrome 忽略 -webkit-text-size-adjust:none 属性。缩小时正在缩放文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11694767/
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
Android Chrome ignoring -webkit-text-size-adjust:none property. Text is being scaled when zoomed out
提问by normmcgarry
Our client requested a website, but didn't want to pay for a mobile version. We still are making it work on mobile. When zoomed all the way out, Chrome on Android (4.0) is scaling a bunch of the text. We have tried setting the -webkit-text-size-adjust:none property, but it seems to be ignored and text is still being scaled up.
我们的客户需要一个网站，但不想为移动版本付费。我们仍在使其在移动设备上运行。当完全放大时，Android (4.0) 上的 Chrome 会缩放一堆文本。我们已经尝试设置 -webkit-text-size-adjust:none 属性，但它似乎被忽略了，文本仍在被放大。
Works fine on iOS.
在 iOS 上运行良好。
Any suggestions?
有什么建议？
采纳答案by Boris Smus
Note that the -webkit-text-size-adjustproperty you mention is non-standard. Read more about it here.
请注意，-webkit-text-size-adjust您提到的属性是非标准的。在此处阅读更多相关信息。
Currently Chrome for Android scales text using font boostingand there's no way to disable it.
目前，Android 版 Chrome 使用字体增强来缩放文本，并且无法禁用它。
If you want a way to disable font boosting, please provide your use-case and log an issue via new.mcrbug.com.
如果您想要一种禁用字体增强的方法，请提供您的用例并通过new.mcrbug.com记录问题。
回答by bradt
Just discovered a workaround for this. Set a max-height on a parent element of the text to be much larger than it would ever appear. For example,
刚刚发现了一个解决方法。将文本的父元素上的最大高度设置为比它出现的要大得多。例如，
<p class="intro">
This is some text that is appearing blown up
and ridiculous on Chrome Mobile.
</p>
p.intro {
max-height: 5000em;
}
You can set the max-height on any parent element. It doesn't have to be the first parent. For example,
您可以在任何父元素上设置最大高度。它不必是第一个父级。例如，
<footer class="primary">
<p class="intro">
This is some text that is appearing blown up
and ridiculous on Chrome Mobile.
</p>
</footer>
footer.primary {
max-height: 5000em;
}
回答by Julia
<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=yes">in the <head>tag could disable zoom
<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=yes">在<head>标签中可以禁用缩放
回答by Theodore R. Smith
-webkit-text-size-adjust:noneis so horrible!
-webkit-text-size-adjust:none太可怕了！
I have poor eye site and constantly have my pages at 200% default zoom. With -webkit-text-size-adjust:none, I cannot read anything, and my onlyalternative is to use Firefox. It's my number one problem these days when browsing.
我的眼睛网站很差，并且我的页面经常以 200% 的默认缩放比例显示。使用-webkit-text-size-adjust:none，我无法阅读任何内容，我唯一的选择是使用 Firefox。这是我这些天浏览时的第一大问题。
Too many sites use this, especially embedded Facebook comments on web pages. You should stop using it and create an interface that will work with any-sized font.
太多网站使用此功能，尤其是网页上嵌入的 Facebook 评论。您应该停止使用它并创建一个可以使用任何大小字体的界面。
回答by Rick
I had the same issue with Firefox on Android.
我在 Android 上使用 Firefox 时遇到了同样的问题。
The solution for me was to add the style "float: left;" to the div containing the problem text.
我的解决方案是添加样式“浮动：左；” 到包含问题文本的 div。
You might need to set the width of the div to the same as the parent (in pixels or 100%) to ensure it doesn't affect the rest of the divs.
您可能需要将 div 的宽度设置为与父级相同（以像素或 100% 为单位），以确保它不会影响其余 div。
