Question

通过在父容器'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元素的计算'font-size'不应该改变，但确实如此。

Chrome在文档中注释掉'height'属性并重新加载页面时显示错误的大小（ - ＆gt;然后p-element中的文本大于正常值）。

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

Answer 1

移动浏览器如何处理文本大小调整似乎是一个众所周知的问题。见text-size-adjust。有几种选择：

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

移动Chrome：使用'height'属性时'font-size'错误

1 个答案: