Android上的Chrome调整字体大小

84

显然，一旦文本段达到一定长度，Android上的Google Chrome浏览器便决定调整文本大小并使其变大（引起各种乐趣）。现在，我有一个网站，其中p-tag的一半遵循我设置的大小，另一半根据需要进行更改-显然取决于段落的长度。

我到底该如何解决？

— 斯普拉克斯
source

1

你有例子吗？另外，哪个Android和Chrome版本？

— Junuxx 2012年

93

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

— Moeffju
source

13

Android Chrome仅将字体增强功能应用于具有动态高度的元素。一旦指定了高度或最大高度，就不会应用字体增强功能。将max-height设置为较大的数字很简单，并且应该没有副作用。

— moeffju

1

这只是一个警告。这解决了我在Android上使用Chrome字体时无法正常播放的问题。但是，它在特定版本的ios上破坏了网站的ipad视图。

— James McDonnell

以及它在ipad上导致css3过渡的一些问题。

— James McDonnell

4

使用此功能会严重破坏Safari（5.1.7）中许多元素的布局，即使您最初并未使用max-height或定义的高度。一些网站完全无法使用，所有结构div元素都笨拙地折叠到页面顶部。不要用最大高度定义“遮盖”您的网站！仅在需要的地方使用，并进行彻底测试。

— Radley Sustaire 2014年

2

Whelp ...就在我以为我看完了一切...另一个疯狂的小故障，另一个疯狂的修复程序。FWIW我在Safari中没有看到任何问题，min-height: 1px不幸的是没有任何作用。max-height: 999999px做到了。我的情况是在路由输入/离开过程中内容转换非常长。字体提升是在过渡期间或过渡之后发生的，不确定是哪一个，但它引起了非常明显的转变。

— 大通

60

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

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

这将正确地建立视图框架，从而消除了对“ FontBoosting”的需求。

— 乔·德罗斯
source

6

这绝对是首选的解决方案。如果您关心事物在移动设备中的外观，那么请拥有视口的所有权！

— Paul Irish

17

但是，这不会禁用字体增强功能。

— Ed Hinchliffe

1

它肯定可以纠正不必要的缩放，以后我将使用它。

— Dizzley 2013年

5

需要说明的是，我已经<meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no">并且仍然在使Chrome严重扩展

— 山姆

这样比较好，因为字体清晰易读。它在保持比例的同时增加了大小，以提高可读性。适合我。

— 珍妮弗·米歇尔

23

现在，您可以设置一个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

— 加雷斯
source

text-size-adjust：在最新的android chrome上，没有一个适合我。

— Stepan Yakovenko

如果您正在使用部署为Web应用程序的gas，则这是首选解决方案。

— jpp

这对我不起作用，但max-height可以。

— Radenko Zec

15

将此重置。 html * {max-height:1000000px;}

— 埃德·辛奇利夫
source

导致我的页脚发粘问题，不得不做html正文*代替

— Sabrina Leggett

除非您实际上在许多不可预测的元素中遇到问题，否则这有点过于激进。否则，最好只针对问题元素。

— 追逐

1

@Chase-在我的情况下，它们是不可预测的（动态）元素，因此我们必须使用一种*方法。这就是说，我要说这是那些不起眼的东西，你很可能忘了一个，并可能导致未来的问题，所以对于维护我可能已经离开它*，即使在当时这只是一个/几个元素。

— Ed Hinchliffe

在找到该线程并发表评论之后，我立即开始看到我怀疑与字体增强有关的其他问题。所以，果然（至少目前如此）有一个* max-height...在我的代码LOL

— 大通

6

经过一些测试，这个规则帮助了我。根据div /表格结构，必须将其添加到包含增强文字的元素或其父元素中。

element or parent element { 
    /* prevent font boosting on mobile devices */
    width: 100%;
    height: auto;
    min-height: 1px;
    max-height: 999999px;
}

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

— 元魔
source

2

我为我的页面找到了解决方案：给父元素一个宽度和高度！字体不会超出这些边界，因此将保持较小。

— 兰迪·弗罗格
source

1

这称为“字体提升”，并且在此WebKit错误中进行了详细描述。当前无法禁用它。

— 鲍里斯·斯莫斯（Boris Smus）
source

看起来确实确实是字体增强，但是可以通过设置max-height: 999999px为@moeffju来防止。

— Chase