JS动态计算移动端rem的解决方案
在做移动端webapp的时候,众所周知,移动设备分辨率五花八门,虽然我们可以通过CSS3的mediaquery来实现适配,例如下面这样:
html{ font-size:20px; } @mediaonlyscreenand(min-width:401px){ html{ font-size:25px!important; } } @mediaonlyscreenand(min-width:428px){ html{ font-size:26.75px!important; } } @mediaonlyscreenand(min-width:481px){ html{ font-size:30px!important; } } @mediaonlyscreenand(min-width:569px){ html{ font-size:35px!important; } } @mediaonlyscreenand(min-width:641px){ html{ font-size:40px!important; } }
但是这种做法并不能适配所有设备,于是就有了实现全适配的JS解决方案,例如下面这样:
;(function(doc,win,undefined){ vardocEl=doc.documentElement, resizeEvt='orientationchange'inwin?'orientationchange':'resize', recalc=function(){ varclientWidth=docEl.clientWidth; if(clientWidth===undefined)return; docEl.style.fontSize=20*(clientWidth/320)+'px'; }; if(doc.addEventListener===undefined)return; win.addEventListener(resizeEvt,recalc,false); doc.addEventListener('DOMContentLoaded',recalc,false) })(document,window);
另外附上淘宝移动端适配解决方案flexible.js源码:
;(function(win,lib){ vardoc=win.document; vardocEl=doc.documentElement; varmetaEl=doc.querySelector('meta[name="viewport"]'); varflexibleEl=doc.querySelector('meta[name="flexible"]'); vardpr=0; varscale=0; vartid; varflexible=lib.flexible||(lib.flexible={}); if(metaEl){ //将根据已有的meta标签来设置缩放比例 varmatch=metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/); if(match){ scale=parseFloat(match[1]); dpr=parseInt(1/scale); } }elseif(flexibleEl){ varcontent=flexibleEl.getAttribute('content'); if(content){ varinitialDpr=content.match(/initial\-dpr=([\d\.]+)/); varmaximumDpr=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){ varisAndroid=win.navigator.appVersion.match(/android/gi); varisIPhone=win.navigator.appVersion.match(/iphone/gi); vardevicePixelRatio=win.devicePixelRatio; if(isIPhone){ //iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案 if(devicePixelRatio>=3&&(!dpr||dpr>=3)){ dpr=3; }elseif(devicePixelRatio>=2&&(!dpr||dpr>=2)){ dpr=2; }else{ dpr=1; } }else{ //其他设备下,仍旧使用1倍的方案 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{ varwrap=doc.createElement('div'); wrap.appendChild(metaEl); doc.write(wrap.innerHTML); } } functionrefreshRem(){ varwidth=docEl.getBoundingClientRect().width; if(width/dpr>540){ width=540*dpr; } varrem=width/10; docEl.style.fontSize=rem+'px'; flexible.rem=win.rem=rem; } win.addEventListener('resize',function(){ clearTimeout(tid); tid=setTimeout(refreshRem,300); },false); win.addEventListener('pageshow',function(e){ if(e.persisted){ clearTimeout(tid); tid=setTimeout(refreshRem,300); } },false); if(doc.readyState==='complete'){ doc.body.style.fontSize=12*dpr+'px'; }else{ doc.addEventListener('DOMContentLoaded',function(e){ doc.body.style.fontSize=12*dpr+'px'; },false); } refreshRem(); flexible.dpr=win.dpr=dpr; flexible.refreshRem=refreshRem; flexible.rem2px=function(d){ varval=parseFloat(d)*this.rem; if(typeofd==='string'&&d.match(/rem$/)){ val+='px'; } returnval; } flexible.px2rem=function(d){ varval=parseFloat(d)/this.rem; if(typeofd==='string'&&d.match(/px$/)){ val+='rem'; } returnval; } })(window,window['lib']||(window['lib']={}));
以上所述是小编给大家介绍的JS动态计算移动端rem的解决方案,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!