移动设备 Chrome:使用'height'媒体资源时'font-size'错误



通过在父容器'foo'foo'内部元素的计算"字体大小"上设置css'高度'属性。这仅在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"类上的"高度"属性。P元素计算的"字体大小"不应更改,但可以更改。

Chrome在评论文档本身中的"高度"属性并重新加载页面时也显示了错误的大小( -> the两种p元素中的文本都比正常情况大)。

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

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

  1. <meta name="viewport" content="width=device-width, initial-scale=1">
  2. 使用实验属性
  3. 将1PX或最大高点设置为99999。似乎这将破坏某些移动设备上的布局。(请参阅帖子:Android上的Chrome Restiz尺寸字体)

相关内容

  • 没有找到相关文章