我发现在 Chrome 和 Firefox 移动浏览器中，超过一定长度的 h1 会增加页面上所有静态定位文本的字体大小，但不会增加绝对定位文本的字体大小。触发问题所需的 h1 长度似乎取决于浏览器和(可能)设备。
例如，在使用 Chrome 或 Firefox 的 Nexus 4 上，以下代码中的 h1 文本和静态定位的 div 文本呈现过大，而绝对定位的 div 文本呈现正常大小。从 h1 标签中删除 2 个字符的文本会导致所有文本在 Chrome 中以正常大小呈现。再删除 2 个字符会导致所有文本在 Firefox 中以正常大小呈现。
<html>
<body style="margin: 0;">
<h1 style="font-size: 1em;">h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1</h1>
<div style="font-size: 1em;">div</div>
<div style="position: absolute; font-size: 1em;">absolute</div>
</body>
</html>
有谁知道为什么会发生这种情况以及如何控制它？
最佳答案
您尝试过使用视口(viewport)元进行试验吗？此元允许移动浏览器根据您的尺寸规范确定某些元素的尺寸。
这是你如何应用它:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
关于android - Long h1 增加了移动浏览器中所有静态定位文本的字体大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18422311/