移动 Chrome：使用“高度”属性时“字体大小”错误

Question

移动 Chrome：使用“高度”属性时“字体大小”错误

通过在父容器 'foo' 上设置 css 'height' 属性，计算出的内部元素的 'font-size' 会发生错误的变化。这只发生在 Chrome 移动设备上。

要对此进行测试，请尝试在 Chrome 下运行以下代码并在开发者控制台中选择任何移动设备：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style>

        .foo {
            height: 600px;
            color: white;
            background: teal;
        }
    </style>
</head>
<body>
        <section>
            <h2>Header in first section</h2>
            <p>Text with a normal size. Text with a normal size.</p>
        </section>
        <section class="foo">
            <h2>Header in second section</h2>
            <p>This text changes size when commenting out 'foo's height property in the Chrome developer console and mobile mode (e.g Galaxy S5) - but why?</p>
        </section>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

然后禁用（注释掉）类 'foo' 上的 'height' 属性。为 p 元素计算的“字体大小”不应该改变，但它会改变。

Chrome 在注释掉文档本身中的“高度”属性并重新加载页面时也会显示错误的大小（-> 然后两个 p 元素中的文本都比正常大）。

请帮帮我 - 这是一个需要报告的错误吗？

Answer 1

mor*_*s05 5

这似乎是移动浏览器如何处理文本大小的一个已知问题。请参阅文本大小调整。有几种选择：

<meta name="viewport" content="width=device-width, initial-scale=1">
使用实验属性
将 min-height 设置为 1px 或 max-height 为 99999。这似乎会破坏某些移动设备上的布局。（请参阅帖子：Android 上的 Chrome 调整字体大小）

归档时间：	7 年，9 月前
查看次数：	2439 次
最近记录：	7 年，9 月前