Android上的Chrome重新调整字体大小

Question

Android上的Chrome重新调整字体大小

Spr*_*rax 76 html css android google-chrome font-size

显然,一段文本达到一定长度后,android上的chrome决定调整文本大小并使其变大(引起各种乐趣).现在我有一个网站,其中大约一半的p-tag遵循我设置的大小,另一半随意改变 - 显然取决于段落的长度.

我怎么解决这个问题呢？

Answer 1

moe*_*fju 87

添加max-height: 999999px;到要阻止字体提升的元素或其父元素.

Android Chrome仅将字体提升应用于具有动态高度的元素.指定高度或最大高度后,不会应用字体提升.将max-height设置为较大的数字很简单,应该没有副作用. (13认同)
使用它会显着破坏Safari(5.1.7)中许多元素的布局,即使您没有使用最大高度或定义的高度.一些网站完全无法使用,所有结构化的"div"元素都被坍塌地折叠到页面顶部.不要用最大高度定义"覆盖"您的网站!仅在需要时使用,并彻底测试. (4认同)
Whelp...就在我以为我已经看到这一切的时候...另一个疯狂的故障和另一个疯狂的修复。FWIW 我在 Safari 中没有看到任何问题，不幸的是 `min-height: 1px` 没有效果。`max-height: 999999px` 可以解决问题。我的情况是在路线进入/离开期间内容转换时间很长。字体提升发生在转换期间或之后，不确定是哪个，但它引起了非常明显的转变。 (3认同)

Answer 2

Joe*_*ose 57

<meta>在文档中包含以下标记<head>:

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

这将正确建立视图框架,从而消除了对"FontBoosting"的需求.

但是,这不会禁用字体提升. (13认同)
这绝对是首选的解决方案.如果您关心移动设备的外观,请获取视口的所有权! (6认同)
作为一个注释,我有`<meta name ="viewport"content ="width = device-width,initial-scale = 0.5,user-scalable = no">`我仍然让Chromes糟糕的缩放 (5认同)

Answer 3

Gar*_*eth 20

现在有一个CSS属性可以设置来控制它:

-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;

Run Code Online (Sandbox Code Playgroud)

请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust

文本大小调整：在最新的 Android chrome 上，没有一个对我有用。 (3认同)

Answer 4

Ed *_*ffe 14

把它放在你的重置. html * {max-height:1000000px;}

Answer 5

met*_*kum 5

经过一些测试后,这条规则帮助了我.必须添加到包含提升文本的元素或其父级,具体取决于div/table结构.

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 6

Bor*_*mus 1

这称为“字体增强”，在此WebKit bug中对此进行了详细描述。目前没有办法禁用它。

归档时间：	13 年，2 月前
查看次数：	41167 次
最近记录：	7 年，7 月前