Dynamically set the mobile page font size technical solution

Set the root node font size, sub-nodes with REM units, to achieve adaptive.

One, the CSS solution media query

Set the HTML font-size

@media screen and (min-width:320px){HTML {font-size:14px;}} @media screen and (min-width:360px){HTML {font-size:16px;}} @media screen and (min-width:400px){HTML {font-size:18px;}} @media screen and (min-width:440px){HTML {font-size:20px;}} @media screen and (min-width:480px){HTML {font-size:22px;}} @media screen and (min-width:640px){HTML {font-size:28px;}}

Second, JS program a

Window.onload=function() {    functionRecalc () {varWindowWidth = Document.documentElement.clientWidth | | Window.innerwidth | |Document.body.clientWidth; //windowwidth = windowwidth > 750:windowwidth;         varrootsize = * (windowwidth/375); varHtmlnode = document.getElementsByTagName ("html") [0]; HtmlNode.style.fontSize= rootsize + ' px ';    } recalc (); Window.addeventlistener (' Resize ', Recalc,false);}

Third, JS scheme b

! (function(Doc, win) {varDocel =doc.documentelement, Resizeevt= ' Orientationchange 'inchWindow? ' Orientationchange ': ' Resize ', Recalc=function() {    varClientWidth =Docel.clientwidth; if(!clientwidth)return; DocEl.style.fontSize= * (clientwidth/375) + ' px ';  }; if(!doc.addeventlistener)return; Win.addeventlistener (Resizeevt, Recalc,false); Doc.addeventlistener (' domcontentloaded ', Recalc,false);}) (document, window);

Four, JS program C

!function(Win, Lib) {varTimer, Doc=win.document, Docelem=doc.documentelement, Vpmeta= Doc.queryselector (' meta[name= "viewport"] '), Flexmeta= Doc.queryselector (' meta[name= "flexible"] '), DPR= 0, Scale= 0, Flexible= Lib.flexible | | (lib.flexible = {}); //set the viewport meta  if(Vpmeta) {Console.warn ("The scaling is set according to the existing META tag"); varInitial = Vpmeta.getattribute ("content"). Match (/initial\-scale= ([\d\.] +)/); if(initial) { scale= Parsefloat (initial[1]);//Initialscale that have been setDPR = parseint (1/scale);//device pixel ratio devicepixelratio    }  }  //set the flexible Meta  Else if(Flexmeta) {varFlexmetacontent = Flexmeta.getattribute ("Content"); if(flexmetacontent) {varInitial = Flexmetacontent.match (/initial\-dpr= ([\d\.] +)/), Maximum= Flexmetacontent.match (/maximum\-dpr= ([\d\.] +)/); if(initial) {DPR= Parsefloat (initial[1]); Scale= Parsefloat ((1/DPR). toFixed (2)); }      if(maximum) {DPR= Parsefloat (maximum[1]); Scale= Parsefloat ((1/DPR). toFixed (2)); }    }  }  //viewport or flexible  //Meta is not set  if(!DPR &&!)Scale ) {    varIsandroid = Win.navigator.appVersion.match (/android/gi); varIsiphone = Win.navigator.appVersion.match (/iphone/gi); varDevicepixelratio =Win.devicepixelratio; if(isiphone) {//iOS, for 2 and 3 screen, with twice times the scheme, the remaining 1 time times the scheme        if(Devicepixelratio >= 3 && (!DPR | | DPR >= 3) ) {DPR= 3; } Else if(Devicepixelratio >= 2 && (!DPR | | DPR >= 2) ) {DPR= 2; } Else{DPR= 1; }    } Else {        //Other devices, still using 1 time times the schemeDPR = 1; } Scale= 1/DPR; } docelem.setattribute ("DATA-DPR", DPR); //Insert viewport meta  if(!Vpmeta) {Vpmeta= Doc.createelement ("meta"); Vpmeta.setattribute ("Name", "viewport"); Vpmeta.setattribute ("Content",        "initial-scale=" + scale + ", maximum-scale=" + scale + ", minimum-scale=" + scale + ", User-scalable=no"); if(docelem.firstelementchild) {docElem.firstElementChild.appendChild (Vpmeta)}Else {      varWrap = doc.createelement ("div");      Wrap.appendchild (Vpmeta);    Doc.write (wrap.innerhtml); }  }  functionsetfontsize () {varWinwidth =docelem.getboundingclientrect (). width; if(Winwidth/dpr > 540) {(Winwidth= 540 *DPR); }    //root node fontSize depends on width    varBasesize = WINWIDTH/10; DocElem.style.fontSize= Basesize + "px"; Flexible.rem= Win.rem =basesize; }  //Reset When window is resizedWin.addeventlistener ("Resize",function() {cleartimeout (timer); Timer= SetTimeout (setfontsize, 300); }, false); //reset when direction changesWin.addeventlistener ("Orientationchange",function() {cleartimeout (timer); Timer= SetTimeout (setfontsize, 300); }, false); //triggered when the cache is read from the browser, pageshow each time the page is loaded. Win.addeventlistener ("Pageshow",function(e) {if(e.persisted) {cleartimeout (timer); Timer= SetTimeout (setfontsize, 300); }  }, false); //Set Datum font  if("complete" = = =doc.readystate) {doc.body.style.fontSize= * DPR + "px"; } Else{Doc.addeventlistener ("Domcontentloaded",function() {doc.body.style.fontSize= * DPR + "px"; }, false);  } setfontsize (); FLEXIBLE.DPR= WIN.DPR =DPR; Flexible.refreshrem=setfontsize; flexible.rem2px=function(d) {varc = parsefloat (d) * This. rem; if(typeofD = = = "string" && D.match (/rem$/) ) {C+ = "px"; }    returnC;  }; Flexible.px2rem=function(d) {varc = parsefloat (d)/ This. rem; if(typeofD = = = "string" && D.match (/px$/) ) {C+ = "REM"; }    returnC; }} (window, Window.lib|| (Window.lib = {}));

Dynamically set the mobile page font size technical solution