Android Chrome 忽略 -webkit-text-size-adjust:none 属性。缩小时正在缩放文本答案

【问题标题】：Android Chrome ignoring -webkit-text-size-adjust:none property. Text is being scaled when zoomed outAndroid Chrome 忽略 -webkit-text-size-adjust:none 属性。缩小时正在缩放文本
【发布时间】：2012-07-26 13:02:00
【问题描述】：

我们的客户请求了一个网站，但不想为移动版本付费。我们仍在使其在移动设备上运行。当一直缩小时，Android (4.0) 上的 Chrome 正在缩放一堆文本。我们已经尝试设置 -webkit-text-size-adjust:none 属性，但它似乎被忽略并且文本仍在按比例放大。

在 iOS 上运行良好。

有什么建议吗？

【问题讨论】：

标签： android css google-chrome

【解决方案1】：

<head> 标签中的<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=yes"> 可以禁用缩放

【讨论】：

这非常适合禁用移动设备上的螺旋式铬调整。谢谢！

【解决方案2】：

我在 Android 上使用 Firefox 时遇到了同样的问题。

我的解决方案是添加样式“float:left;”到包含问题文本的 div。

您可能需要将 div 的宽度设置为与父级相同（以像素为单位或 100%），以确保它不会影响其余 div。

见How to prevent mobile browser from resizing text

【讨论】：

【解决方案3】：

刚刚发现了一个解决方法。将文本的父元素的最大高度设置为比它出现的要大得多。例如，

<p class="intro">
  This is some text that is appearing blown up 
  and ridiculous on Chrome Mobile.
</p>

p.intro {
  max-height: 5000em;
}

您可以在任何父元素上设置最大高度。它不一定是第一个父母。例如，

<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;
}

【讨论】：

这个，以及被接受的答案都应该是答案
但是为什么..？你能解释一下吗？
这太不可思议了。不能再投票了。接受的答案对我不起作用，希望对其他人有用
我可以确认这对我也有用。惊人的！我仅将 CSS 定位在 Android 浏览器上，以防万一这会对其他设备造成任何不良影响。
感谢上帝，有一个解决方案！

【解决方案4】：

-webkit-text-size-adjust:none 太可怕了！

我的网站视力不佳，我的网页经常以 200% 的默认缩放比例显示。使用-webkit-text-size-adjust:none，我无法阅读任何内容，而我的唯一替代方案是使用 Firefox。这是我这些天浏览时的头号问题。

太多的网站使用这个，尤其是网页上嵌入的 Facebook cmets。您应该停止使用它并创建一个可以使用任何大小字体的界面。

【讨论】：

除了它不会缩放所有东西，只是它认为“重要”的东西，完全破坏了 CSS。

【解决方案5】：

请注意，您提到的 -webkit-text-size-adjust 属性是非标准的。阅读更多关于它的信息here。

目前 Android 版 Chrome 使用 font boosting 缩放文本，并且无法禁用它。

如果您想要一种禁用字体增强的方法，请提供您的用例并通过new.mcrbug.com 记录问题。

【讨论】：

可以通过提供大于当前高度的max-height 来禁用字体增强。链接的 webkit 票建议max-height: 1000000px。