Android 长h1增加了移动浏览器中所有静态定位文本的字体大小_Android_Html

Android 长h1增加了移动浏览器中所有静态定位文本的字体大小

android html

Android 长h1增加了移动浏览器中所有静态定位文本的字体大小,android,html,Android,Html,我发现在Chrome和Firefox移动浏览器中，超过一定长度的h1会增加页面上所有静态定位文本的字体大小，但不会增加绝对定位文本的字体大小。触发问题所需的h1长度似乎取决于浏览器和（可能）设备例如，在使用Chrome或Firefox的Nexus4上，以下代码中的h1文本和静态定位的div文本呈现过大，而绝对定位的div文本呈现正常大小。从h1标记中删除2个字符会导致所有文本在Chrome中以正常大小呈现。在Firefox中删除另外两个字符会导致所有文本以正常大小呈现 <html

我发现在Chrome和Firefox移动浏览器中，超过一定长度的h1会增加页面上所有静态定位文本的字体大小，但不会增加绝对定位文本的字体大小。触发问题所需的h1长度似乎取决于浏览器和（可能）设备

例如，在使用Chrome或Firefox的Nexus4上，以下代码中的h1文本和静态定位的div文本呈现过大，而绝对定位的div文本呈现正常大小。从h1标记中删除2个字符会导致所有文本在Chrome中以正常大小呈现。在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>


H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1
div
绝对的

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

您尝试过使用viewport meta吗？此元允许移动浏览器根据您的尺寸规格确定某些元素的尺寸

这是您应用它的方式：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

该视口设置会使示例代码中的文本始终以较大的大小显示，但如果我将其应用于我的站点，则所有内容都会过大，并在移动浏览器上消失。我一直在玩它很多，但我的网站有一个流动的设计，它看起来最好没有视口约束。我在我的原始帖子中添加了一些说明。是否有一个视口设置可以使字体大小保持一致，而不会以其他方式影响站点的布局？我尝试了o在这里显示的内容，但仍然无法理解问题-您是否尝试过使用CSS重置，这可能与本机浏览器的CSS干扰有关？这个问题似乎并没有在JSFIDLE隔间中表现出来。你能将测试代码转储到一个页面上，然后在移动Chrome或移动Firefox中打开它吗？我尝试使用Meyer CSS重置，发现在body标记中添加style=“margin:0；”可以在问题出现之前在h1标记中输入更多字符。我更新了我原来的帖子。你们试过玩em的吗？问题似乎与此有关，因为这是唯一影响本机浏览器字体大小的因素。你甚至应该检查你的浏览器查看定义，因为这可能是一个代码解释问题。明白了！最大的突破是这里主要答案中的编辑：“android手机上的Chrome使用字体增强功能，因此无论您设置了什么值，webkit文本大小调整都将被忽略。您可以通过将最大高度设置为较大的值（100000像素左右）来禁用字体增强功能。请参见此错误。”简单地说就是这样。我的示例代码可以通过设置h1，div{max height:100000px；}来“修复”。