Android 上的 Chrome 调整字体大小
Posted
技术标签:
【中文标题】Android 上的 Chrome 调整字体大小【英文标题】：Chrome on Android resizes font 【发布时间】：2012-07-02 14:25:54 【问题描述】：显然，一旦文本段落达到一定长度，android 上的 Google Chrome 决定调整文本大小并使其变大（引起各种乐趣）。现在我有一个网站，其中大约一半的 p-tags 遵循我设置的大小，而另一半则随意更改 - 显然取决于段落的长度。
我该如何解决这个问题？
【问题讨论】：
你有例子吗？另外，Android 和 Chrome 哪个版本？ 【参考方案1】：现在您可以设置一个 CSS 属性来控制它：
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
见https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust
【讨论】：
text-size-adjust: 在最新的 android chrome 上没有一个对我有用。 如果您使用部署为 Web 应用程序的气体，这是首选解决方案。【参考方案2】：把它放在你的重置中。 html * max-height:1000000px;
【讨论】：
导致我的页脚粘滞问题，不得不改为使用 html body * 这有点过于激进了，除非您实际上在许多不可预测的元素中遇到了问题。否则最好只针对问题元素。 @Chase - 在我的情况下，它们是不可预测的（动态）元素，因此我们必须使用* 方法。也就是说，我认为这是您可能会忘记并可能在未来引起问题的那些晦涩的事情之一，因此为了可维护性我可能会将其留在*，即使当时 它只是一个/几个元素。
在我找到这个帖子并发表评论后，我开始看到我怀疑与字体增强有关的其他问题。所以，果然（至少现在）我的代码中有一个* max-height... LOL【参考方案3】：
经过一些测试，这条规则帮助了我。必须添加到包含提升文本的元素或其父元素，具体取决于 div/table 结构。
element or parent element
/* prevent font boosting on mobile devices */
width: 100%;
height: auto;
min-height: 1px;
max-height: 999999px;
也许必须根据您的需要更正宽度和高度值。
【讨论】：
【参考方案4】：在文档<head>中包含以下<meta>标签：
<meta name="viewport" content="width=device-width, initial-scale=1">
这将正确建立视图框架，从而消除对“FontBoosting”的需要。
【讨论】：
这绝对是首选的解决方案。如果您关心移动设备中的外观，那么就拥有自己的视口吧！ 不过，这不会禁用字体增强。 它肯定会纠正不必要的缩放，我将来会使用它。 请注意，我有<meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no">，但 Chrome 的缩放效果仍然很糟糕
这样更好，因为字体清晰。它保持比例，同时增加尺寸以提高可读性。非常适合我。【参考方案5】：
将max-height: 999999px; 添加到要防止字体增强的元素或其父元素。
【讨论】：
Android Chrome 仅对具有动态高度的元素应用字体增强。一旦您指定了高度或最大高度，就不会应用字体提升。将 max-height 设置为较大的数字很简单，应该没有副作用。 只是一个警告。这解决了我在 android 上使用 Chrome 字体时遇到的问题。 然而它破坏了网站在特定版本 ios 上的 ipad 视图。 以及它在 ipad 上导致 css3 转换的一些问题。 使用它会显着破坏 Safari (5.1.7) 中许多元素的布局，即使您一开始没有使用 max-height 或定义的高度。一些网站完全无法使用，所有的结构div 元素都尴尬地折叠到页面顶部。不要用最大高度定义“覆盖”您的网站！仅在需要时使用，并进行彻底测试。
Whelp...就在我以为我已经看到这一切的时候...另一个疯狂的小故障和另一个疯狂的修复。 FWIW 我在 Safari 中没有看到任何问题，很遗憾，min-height: 1px 没有任何效果。 max-height: 999999px 可以解决问题。我的案例是在路线进入/离开期间的内容转换时间很长。字体增强发生在过渡期间或过渡之后，不确定是哪一个，但它引起了非常明显的转变。【参考方案6】：
我为我的页面找到了一个解决方案：给父元素一个宽度和高度！字体不会超出这些边界，因此它会保持较小（呃）。
【讨论】：
【参考方案7】：这称为“字体增强”，在WebKit bug 中有详细描述。目前无法禁用它。
【讨论】：
看起来确实是字体增强，但可以通过设置max-height: 999999px 来防止它，就像@moeffju 描述的那样。以上是关于Android 上的 Chrome 调整字体大小的主要内容，如果未能解决你的问题，请参考以下文章