移动Chrome浏览器:使用"height"属性时，错误的"font-size" [英] Mobile Chrome: Wrong 'font-size' when using 'height' property
问题描述
通过在父容器"foo"上设置css"height"属性，计算出的内部元素的"font-size"将错误地更改.这仅发生在Chrome上的移动设备上.
By setting a css 'height' property on a parent container 'foo' the calculated 'font-size' of the inner elements changes wrongly. This happens only on a mobile device on Chrome.
要对此进行测试，请尝试在Chrome下运行以下代码，然后在开发者控制台中选择任何移动设备:
To test this please try to run the following code under Chrome and choose any mobile device in the developer console:
<!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元素的字体大小"不应更改，但可以更改.
Then disable (comment out) the 'height' property on the class 'foo'. The calculated 'font-size' for the p-element should not change but it does.
在注释掉文档本身的'height'属性并重新加载页面时，Chrome也会显示错误的大小(->则两个p元素中的文本都比普通文本大).
Chrome also shows the wrong size when commenting out the 'height' property in the document itself and reloading the page (-> then the text in both p-element is bigger than normal).
请帮帮我-这是一个需要报告的错误吗?
Please help me out - is this a bug that needs to be reported?
推荐答案
似乎这是移动浏览器如何处理文本大小调整的已知问题.请参阅 text-size-adjust .有几种选择:
It seems this is a known problem how mobile browsers handle text sizing. See text-size-adjust. There are several options for this:
-
<meta name="viewport" content="width=device-width, initial-scale=1"> - 使用实验属性
- 将最小高度设置为1px或最大高度设置为99999.这似乎会破坏某些移动设备上的布局. (请参阅帖子: Android上的Chrome调整字体大小)
<meta name="viewport" content="width=device-width, initial-scale=1">- Working with the experimental property
- Setting a min-height of 1px or max-height of 99999. It seems that this will break layout on some mobile devices. (See post: Chrome on android resizes font)
这篇关于移动Chrome浏览器:使用"height"属性时，错误的"font-size"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
