Note the confusing rendering bug in the mobile page

Problem Description:

In a very simple test page

Simple two-block layout, the upper and lower two pieces are not individually set font size, the body inherits the size, that is, 40px. We now give the first block. FL plus floating float:left;

The other block is in the normal flow of the document without any action. We will find that in Chrome's phone debugging Mode page rendering will be weird behavior, the upper and lower font size incredibly different, but also very obvious.

Think for a long time completely no clue, do not know why this behavior, so I use Chrome debugging found that the above floating block font size is normal 40px,

However, the font size in the normal document flow block element below is rendered as 49.256px. Why? Why? Why? No wonder this bug happens, but specifically because why I really don't know, I only know the solution behind it is to set viewport

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

Plus this rendering is normal. It seems that the mobile-side rendering principle has to be enhanced understanding AH.

Note the confusing rendering bug in the mobile page