JavaScript controls REM Font size

Abstract: In the Writing Response H5 page, I often use REM font, in order to compatible with multiple resolutions of the device, need to write multiple @media tags, too cumbersome and not sophisticated, especially the mobile page often can't hit the effect I want, and then use JS instead of the CSS @media, the following is the code. (The following scenario is in 750px design)

Scenario one, the disadvantage: Browser use no problem, Android and iOS devices embedded in the time, will be affected by the system font settings, the principle is when the system set large font, will change the size of the HTML font-size, causing the page bug.

(function(doc,Win{    varDocel= Doc.documentelement,Resizeevt= ' Orientationchange ' inchWindow? ' Orientationchange ':' Resize ',Recalc= function(){            varClientWidth= Docel.clientwidth;            if(!clientwidth)return;            if(clientwidth>= -){                Docel.style.fontSize = ' 100px ';            }Else{                Docel.style.fontSize =  - *(ClientWidth/ -)+ ' px!important ';            }        };    if(!Doc.AddEventListener)return;    win.AddEventListener(resizeevt,Recalc, false);    Doc.AddEventListener(' domcontentloaded ',Recalc, false);}) (document,Window;

Scenario two, reset the system settings font, resolved the bug, no other problems found

function htmlfontsize(){     varH= Math.Max(Document.documentelement.clientheight, window.Innerheight || 0);     varW= Math.Max(Document.documentelement.clientwidth, window.innerwidth || 0);     varWidth=W>H?H:w;Width=Width>  - ?  -: Width;     varFz= ~~(width*100000/37.5)/20000;     Document.getElementsByTagName("HTML")[0].style.Csstext = ' font-size: ' +Fz+"px";     varRealfz= ~~(+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";     } }

Outside, WebView Plus this setting, you can block the system settings of the font effect, so do not use JS to judge.

webview.getSettings().setTextZoom(100);

Thanks to the open source, some of the text originated from the network, if there is infringement, please contact delete
Zhou Mingjie

JavaScript controls REM Font size