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

【问题标题】：Mobile Chrome: Wrong 'font-size' when using 'height' property移动 Chrome：使用“高度”属性时“字体大小”错误
【发布时间】：2018-05-26 18:16:05
【问题描述】：

通过在父容器 '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>

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

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

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

【问题讨论】：

标签： css google-chrome mobile

【解决方案1】：

这似乎是移动浏览器如何处理文本大小的已知问题。见text-size-adjust。有几种选择：

<meta name="viewport" content="width=device-width, initial-scale=1">
使用实验属性
将最小高度设置为 1 像素或最大高度设置为 99999。这似乎会破坏某些移动设备上的布局。（见帖子：Chrome on android resizes font）

【讨论】：