当前位置: 首页 > Web前端 > HTML

灵活精简版

时间:2023-04-02 15:57:57 HTML

看了flexible的源码,不明白为什么android没有scaling,而是粗放的设置,让android很不精确,所以略微删减代码如下,留着自己用。后面有学到什么知识点,再复习一下。本质上就是将视口设置为物理像素大小,然后将其缩小到屏幕独立像素的大小;(function(win,lib){vardoc=win.document;vardocEl=doc.documentElement;varmetaEl=doc.querySelector('meta[name="viewport"]');vardpr=0;varscale=0;vartid;varflexible=lib.flexible||(lib.flexible={});if(metaEl){varmatch=metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);if(match){scale=parseFloat(match[1]);dpr=parseInt(1/scale);}}if(!dpr&&!scale){dpr=win.devicePixelRatio||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-scale能够=否');如果(docEl.firstElementChild){docEl.firstElementChild.appendChild(metaEl);}else{varwrap=doc.createElement('div');裹。appendChild(metaEl);医生。写(包装。innerHTML);}}functionrefreshRem(){varwidth=docEl.getBoundingClientRect().width;//锁定rem默认54px*dprif(width/dpr>540){width=540*dpr;}varrem=宽度/10;docEl.style.fontSize=rem+'px';flexible.rem=win.rem=rem;}win.addEventListener('resize',function(){clearTimeout(time);time=setTimeout(refreshRem,300);},false);win.addEventListener('pageshow',function(e){if(e.persisted){clearTimeout(time);time=setTimeout(refreshRem,300);}},false);如果(doc.readyState==='complete'){doc.身体。风格。fontSize=12*dpr+'px';}else{doc.addEventListener('DOMContentLoaded',function(e){doc.body.style.fontSize=12*dpr+'px';},错误的);}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';}返回值;}flexible.px2rem=function(d){varval=parseFloat(d)/this.rem;if(typeofd==='string'&&d.match(/px$/)){val+='rem';}返回值;}})(窗口,窗口['lib']||(窗口['lib']={}));