5

我发现在 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>

有谁知道为什么会发生这种情况以及如何控制它？

4

1 回答 1

0

您是否尝试过使用视口元数据？此元允许移动浏览器根据您的尺寸规格确定某些元素的尺寸。

这是你应用它的方式：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
于 2013-08-25T04:53:55.600 回答