JS Dynamic Computing Mobile-end REM Solution _javascript Tips

When it comes to mobile web apps, it's well known that mobile devices have a wide variety of resolutions, although we can do this with CSS3 media query, such as the following:

HTML {
font-size:20px;
}
@media only screen and (min-width:401px) {
html {
font-size:25px!important
}
} @media only screen and (min-width:428px) {
html {
font-size:26.75px!important
}
} @media only screen and (min-width:481px) {
html {
font-size:30px!important 
}
} @media only screen and (MIN-WIDTH:569PX) {
html {
font-size:35px!important 
}
} @media only screen and (min-width:641px) {
html {
font-size:40px!important 
}}

But this approach does not fit all devices, so there is a full fit JS solution, such as the following:

;(function (Doc, win, undefined) {
var docel = doc.documentelement,
resizeevt = ' orientationchange ' in win? ' Orientationchange ': ' Resize ',
recalc = function () {
var clientwidth = docel.clientwidth;
if (clientwidth = = undefined) return;
docEl.style.fontSize = * (clientwidth/320) + ' px ';
if (Doc.addeventlistener = = undefined) return;
Win.addeventlistener (Resizeevt, Recalc, false);
Doc.addeventlistener (' domcontentloaded ', Recalc, False)
}) (document, window);

Also attached Taobao mobile end Adapter Solution Flexible.js Source:

;(function (Win, Lib) {var doc = win.document var docel = doc.documentelement; var metael = Doc.queryselector (' Meta[name
= "Viewport"];
var flexibleel = doc.queryselector (' meta[name= ' flexible "]);
var DPR = 0;
var scale = 0;
var Tid; var flexible = Lib.flexible | |
(lib.flexible = {}); if (Metael) {//will set the scaling scale var match = Metael.getattribute (' content ') based on the existing meta tags. match (/initial\-scale= [\d\.]
+)/); if (match) {scale = parsefloat (match[1]); DPR = parseint (1/scale);} else if (flexibleel) {var content = Flexibleel.getattribute (' content '); if (content) {var INITIALDPR = Content.match (/in Itial\-dpr= ([\d\.]
+)/); var MAXIMUMDPR = Content.match (/maximum\-dpr= ([\d\.]
+)/); 
if (INITIALDPR) {DPR = parsefloat (initialdpr[1]); scale = parsefloat ((1/DPR). toFixed (2)); 
} if (MAXIMUMDPR) {DPR = parsefloat (maximumdpr[1)); scale = parsefloat ((1/DPR). toFixed (2)); }} if (!DPR &&!scale) {var isandroid = Win.navigator.appVersion.match (/android/gi); var isiphone = Win.naviga Tor.appvErsion.match (/IPHONE/GI);
var devicepixelratio = Win.devicepixelratio; 
if (Isiphone) {//iOS, for 2 and 3 screens, use twice times the scheme, the rest with 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-fold scheme DPR = 1;} scale = 1/DPR;
} docel.setattribute (' DATA-DPR ', DPR); if (!metael) {Metael = doc.createelement (' meta '); Metael.setattribute (' name ', ' viewport '); Metael.setattribute ('
Content ', ' initial-scale= ' + scale + ', maximum-scale= ' + scale + ', minimum-scale= ' + scale + ', User-scalable=no '); if (docel.firstelementchild) {docEl.firstElementChild.appendChild (metael);} else {var wrap = doc.createelement (' div ')
;
Wrap.appendchild (Metael);
Doc.write (wrap.innerhtml); 
The function Refreshrem () {var width = Docel.getboundingclientrect (). width; if (Width/dpr > 540) {width = 540 * DPR;
var rem = WIDTH/10;
docEl.style.fontSize = rem + ' px '; Flexible.rem = Win.rem= REM;
} win.addeventlistener (' Resize ', function () {cleartimeout (tid); tid = settimeout (Refreshrem,);}, False); 
Win.addeventlistener (' Pageshow ', function (e) {if (e.persisted) {cleartimeout (tid); tid = settimeout (Refreshrem, 300);}
}, False); if (doc.readystate = = ' complete ') {doc.body.style.fontSize = * DPR + ' px ';} else {Doc.addeventlistener (' Domcontentl
Oaded ', function (e) {doc.body.style.fontSize = * DPR + ' px ';}, False);
} refreshrem ();
FLEXIBLE.DPR = WIN.DPR = DPR;
Flexible.refreshrem = Refreshrem; flexible.rem2px = function (d) {var val = parsefloat (d) * THIS.REM; if (typeof d = = ' String ' && D.match (/rem$/))
{val = = ' px ';}
return Val;  } Flexible.px2rem = function (d) {var val = parsefloat (d)/this.rem; if (typeof d = = ' String ' && D.match (/px$/))
{val = = ' rem ';} return Val; }) (window, window[' lib '] | | (window[' lib '] = {}));

The above is a small series to introduce the JS Dynamic computing Mobile End REM solution, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!