記 移動端頁面中莫名其妙的渲染BUG

標籤：

問題描述：

在一個很簡單的測試頁面中

簡單的兩塊布局，上下兩塊均沒有單獨設定字型大小，都用body繼承的大小，即40px。我們現在給第一個塊.fl  加上浮動 float:left;

另外一個塊處於正常文檔流，不做任何操作。我們會發現，在chrome的手機偵錯模式下頁面的渲染會發生怪異的行為，上下的字型大小居然不一樣，而且還很明顯。

想了很久完全沒有什麼頭緒，不知道為什麼會發生這種行為，於是我就藉助chrome的調試發現，上面浮動塊的字型大小是正常的40px,

但是下面正常文檔流塊元素中的字型大小卻被渲染成了49.256px。WHY?WHY?WHY?怪不得會產生這樣的BUG，不過具體因為什麼我是真的不知道，我只知道後面的解決方案是設定viewport

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0,minimum-scale=1.0, user-scalable=no">

加上這個渲染就正常了。看來移動端渲染原理還得加強理解啊。

記 移動端頁面中莫名其妙的渲染BUG