通过在父容器'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元素中的文本都比正常情况大)。
请帮助我 - 这是需要报告的错误吗?
这似乎是一个已知的问题,移动浏览器如何处理文本尺寸。请参阅文本大小调整。有几种选择:
-
<meta name="viewport" content="width=device-width, initial-scale=1">
- 使用实验属性
- 将1PX或最大高点设置为99999。似乎这将破坏某些移动设备上的布局。(请参阅帖子:Android上的Chrome Restiz尺寸字体)