移动版Chrome浏览器:使用“height”属性时“font-size”错误

5
通过在父容器 '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”不应更改,但实际上确实更改了。
当在文档本身中注释掉“height”属性并重新加载页面时(->然后两个p元素中的文本都比正常情况下大),Chrome也会显示错误的大小。
请帮我确认一下 - 这需要报告一个错误吗?
1个回答

6

看起来这是移动浏览器处理文本大小的已知问题。请参阅text-size-adjust。有几个选项可供选择:

  1. <meta name="viewport" content="width=device-width, initial-scale=1">
  2. 使用实验属性
  3. 设置最小高度为1px或最大高度为99999。似乎这会在某些移动设备上破坏布局。(查看文章:Chrome on android resizes font)

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接