当前位置: 首页 > Web前端 > vue.js

vue大屏适配

时间:2023-03-31 15:34:17 vue.js

flex.js;(function(win,lib){vardoc=win.documentvardocEl=doc.documentElementvarmetaEl=doc.querySelector('meta[name="viewport"]')varflexibleEl=doc.querySelector('meta[name="flexible"]')vardpr=0varscale=0vartidvarflexible=lib.flexible||(lib.flexible={})if(metaEl){console.warn('将根据已有的元标签来设置缩放例子')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))}如果(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.devicePixelRatioif(isIPhone){//iOS下,对于2屏和3屏,使用2倍解,其余使用1x方案if(devicePixelRatio>=3&&(!dpr||dpr>=3)){dpr=3}elseif(devicePixelRatio>=2&&(!dpr||dpr>=2)){dpr=2}else{dpr=1}}else{//在其他设备下,仍然使用1x方案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().widthif(width/dpr<1366){width=1366*dpr}elseif(width/dpr>5760){width=5760*dpr}varrem=width/10docEl.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=dprflexible.refreshRem=refreshRemflexible.rem2px=function(d){varval=parseFloat(d)*this.remif(typeofd==='string'&&d.match(/rem$/)){val+='px'}returnval}flexible.px2rem=function(d){varval=parseFloat(d)/this.remif(typeofd==='字符串'&&d.match(/px$/)){val+='rem'}returnval}})(window,window['lib']||(window['lib']={}))import'flex.js'