android - 设置 div 高度或使用长文本时字体大小会更改，仅在智能手机上

Question

我注意到一个非常奇怪的行为。

在桌面上，使用以下代码，字体大小始终保持一致。

但是在智能手机上(我在 android 上用 firefox 和 chrome 测试过)，我观察到以下情况:

1) 这里第一个文本比第二个大。

<div style="width:560px;margin:auto;font-size:20px">
    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
    <div style="height:20px">
        bla bla
    </div>
</div>

2) 在这里，它们都很小(我只缩短了拳头文字)

<div style="width:560px;margin:auto;font-size:20px">
    bla bla
    <div style="height:20px">
        bla bla
    </div>
</div>

3) 在这里，它们都很大(我已经删除了 style="height:20px")

<div style="width:560px;margin:auto;font-size:20px">
    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
    <div>
        bla bla
    </div>
</div>

这对我来说没有意义，有人可以解释一下吗？

Answer 1

移动开发需要一些元标记，这可能会导致您的问题:

<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scaleable=no, width=device-width" />

这个问题的解决方案也可以帮助你:

best practice font size for mobile