Active font amplification for the new X5 kernel Blink and google chrome

Active font amplification for the new X5 kernel Blink and google chrome

I started my current company in middle March. to familiarize myself with the company's processes as soon as possible, the leaders asked me to complete the mobile wap website ...... But the company's requirement is to scale the page by 0.5 times (initial-scale = 0.5), okay! Now I can make it difficult, because I used to do not scale the page all the time, and now I have to change it for a moment!

Through a variety of experiments, it is finally determined that the method of initial-scale = 1 is not scaled under normal circumstances, on the premise that it is 640px. In this way, the minimum screen size of 320px is the same as that of 0.5 times! When I wrote initial-scale = 1.0 and changed 1.0 to 0.5, the problem came ......

In the mobile QQ browser and google chrome Mobile Phone mode, the test found that some fonts on the page are automatically enlarged instead of the normal font size.

 

Then, we conducted test mediation through various methods, and the final effect was still unsatisfactory ...... There is no reason to interpret this phenomenon, and many methods do not work. In addition, it is very interesting to find that deleting a module or some text will become normal. This is just a phenomenon after deleting some modules or text, in addition, setting the width and width will become normal. Of course, there are other kinds of interesting situations. I will not list them here. If you are interested, try them out! Through a variety of tests, you will not be willing to take pains! Finally, I finally found a more appropriate method! Long live! I finally got rid of this situation! However, we are not happy yet, and then new problems arise again! We are excited! New problems found that the text is still automatically zoomed in, and there will be the same strange phenomenon as above, which is related to the width and height of labels ...... Then, we found that there were no related problems on the Internet through various searches and various searches! However, through various mobile browser tests, we found that this problem only occurs in the QQ browser. The strange thing is that there is a problem with the Android system, and there is no problem with the QQ browser in the IOS system. Okay! I'm speechless ...... According to various materials, I suspect it has something to do with the new Blink kernel of the QQ browser X5, but this is not sure. After all, we do not know other people's source code, and we are not sure whether it is the problem, it can only be inferred! Now we have no point. We can't find a better solution ...... Later, I was lucky enough to receive advice from QQ browser developers! Originally, "in the Blink of the X5 new kernel, the font will be automatically zoomed in during the page layout, and the main font on the page will be detected, when a certain font is considered to be a small font in our judgment rules and is the main font in the page, it will take the initiative to enlarge the operation, and this optimization is also available in chrome, this is easy for users to read, so that users can have a better reading experience. This may also be related to the initial-scal settings. When calculating the magnification, the browser obtains the windowInfo of the page, including windowSize, and scale changes the size, therefore, the calculated multiples are greater. Okay! I understand! His suggestion is to set the height or scale to 1 as appropriate. I tried setting the height to correct it. As for scale, it seems that I cannot! If you are interested, you can try it out. By the way, you can see which other methods can be implemented. The text in the image is the result of setting width: 100%; display: table; height: 1px ...... Here, I will explain: Setting the height is limited when it is unclear about the number of texts called in the background. At the same time, I found that setting max-height is also possible, but it also has some limitations. I don't know how much text is called in the background, so I don't know the maximum size and maximum height to be set. Maybe you will say that the higher the setting, the better, the higher the setting? However, I still think this is not so good! So I set the height to 1. Why is there no problem? It is because I have set the display: table at the same time. It increases independently and is not affected by the height! If you have any children's shoes that you don't understand, you can learn more! I am not talking nonsense! It's time to have lunch ...... Although not well written, there may be some unclear descriptions, but I hope it will be helpful to everyone! Thank you!