Mobile REM Layout, user-adjusted phone font size or browser font size causes problems with page layout errors

First, the user changes the size of the phone font settings, affecting the Web page opened in the app.

The size of the phone font is set to affect the app's page.
Android can be configured via WebView webview.getsettings (). Settextzoom (100) You can disable zooming and display in hundred percent.

Second, the user adjusts the browser font size, affects the Web page opened from the browser

The browser sets the font size, which affects the page that the browser opens. JS can control the user to modify the font size, so that the page is not affected.

(function(Doc, win) {//use native method to get the font size of user-set browser (IE compatible)        if(doc.documentElement.currentStyle) {varuser_webset_font=doc.documentelement.currentstyle[' FontSize ']; }        Else {            varUser_webset_font=getcomputedstyle (Doc.documentelement,false) [' FontSize ']; }//scale factor after rounding vs. default 16px        varXs=parsefloat (User_webset_font)/16;//set the font size for the REM JS setting        varView_jsset_font,result_font; varDocel =doc.documentelement, Resizeevt= ' Orientationchange 'inchWindow? ' Orientationchange ': ' Resize ', clientwidth, Recalc=function() {clientwidth=Docel.clientwidth; if(!clientwidth)return; if(!doc.addeventlistener)return; if(clientwidth<750){//set the font size for the REM JS settingVIEW_JSSET_FONT=100 * (clientwidth/750);//The final font size is REM font/factorResult_font=view_jsset_font/xs;//set the root font sizeDocEl.style.fontSize = Result_font + ' px '; }            Else{docEl.style.fontSize= + ' px ';    }        }; Win.addeventlistener (Resizeevt, Recalc,false); Doc.addeventlistener (' domcontentloaded ', Recalc,false);}) (document, window);

Mobile REM Layout, user-adjusted phone font size or browser font size causes problems with page layout errors