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

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

1 个答案: