Fix a bug that causes H5 pages to deform in WebView because the phone sets the font size

First of all, we made a H5 page, open in all kinds of mobile browsers is no problem. We use the rem unit to layout, through JS to dynamically calculate the window width of the page, dynamic settings html font-size , everything is more perfect.

At this point, you confidently h5 gave the address to the app engineer, made a WEBVIEW nesting, and then successfully completed the completion.

Test group in a bunch of mobile phone testing APP , suddenly, on a phone open, your page layout is disorderly, the word becomes larger or smaller, in short, very wonderful.

You suspect APP the problem, but the client does not admit it. You look in the mobile browser and make sure you don't have a dime problem, and it's not your problem to admit it. So the testers are asking for changes to the two of you who never die. So, the client to you add debugging tools, you open chrome to debug, found a very very wonderful problem:

I clearly set the html font size is 100px , why in the APP become 86 (or other numbers), you find all the code, did not find out where this 86 came from, you are going crazy!! Find n More people help, have not solved this problem!! I would like to be able to tell you, come to see me this blog post, because, you now experience everything, I have just experienced ~ ~

Well, you wouldn't expect it to be caused by the size of the phone setting font. Because the content in the default browser is not controlled by the system font size setting, at least a few of the phones I encounter are the case. But the app is not the same, the app is controlled by that thing!!

The problem is clearly described and there are the following factors

1. Your page rem is in units, and it is js dynamically calculated using html thefont-size
2. Your page is added to the app webview
3. This fucking phone's been reset. Font size

Workaround

In general, we calculate the dynamic after the good html font-size , we will not do anything, and left. However, we now know that the size we set is not necessarily the actual size, so we need to set the font size, then go back to retrieve it html font-size , see the actual value, and we set the same. If it is not the same, it should be set again according to the proportions.

Here's my full code:

function Htmlfontsize () {    var h = Math.max (document.documentElement.clientHeight, Window.innerheight | | 0);    var w = Math.max (document.documentElement.clientWidth, window.innerwidth | | 0);    var width = w > h? H:w;    width = width > 720? 720:width    var FZ = ~ ~ (WIDTH*100000/36)/10000    document.getelementsbytagname ("html") [0].style.csstext = ' Font-size: ' + FZ + ' px ';    var Realfz = ~ ~ (+window.getcomputedstyle (document.getelementsbytagname ("HTML") [0]). Fontsize.replace (' px ', ') * 10000)/10000    if (FZ!== realfz) {        document.getelementsbytagname ("html") [0].style.csstext = ' font-size: ' + FZ * ( FZ/REALFZ) + "px";    }}

Fix a bug that causes H5 pages to deform in WebView because the phone sets the font size