設置div高度或使用長文本時字體大小發生更改，僅在智能手機上

Question

我注意到了一個非常奇怪的行爲。

在桌面上，使用以下代碼，字體大小始終保持一致。

但在智能手機（我與Firefox和Android上的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