1 !function(win, lib) { 2 var timer, 3 doc = win.document, 4 docElem = doc.documentElement, 5 vpMeta = doc.querySelector('meta[name="viewport"]'), 6 dpr = 1, 7 scale = 1; 8 // 插入 viewport meta 9 if (!vpMeta) { 10 vpMeta = doc.createElement("meta"); 11 12 vpMeta.setAttribute("name", "viewport"); 13 vpMeta.setAttribute("content", 14 "width=device-width,initial-scale=" + scale + ", maximum-scale=" + scale + ", minimum-scale=" + scale + ", user-scalable=no"); 15 16 if (docElem.firstElementChild) { //在头部添加viewpoint 17 docElem.firstElementChild.appendChild(vpMeta) 18 } else { // 如果获取不到头部,就用创建元素然后写入发方法来写入到页面里 19 var div = doc.createElement("div"); 20 div.appendChild(vpMeta); 21 doc.write(div.innerHTML); 22 } 23 } 24 function setFontSize() { 25 var winWidth = docElem.getBoundingClientRect().width; 26 if(winWidth>750){winWidth=750} //限制最大宽度 27 // 根节点 fontSize 根据宽度决定(到时候算rem的时候,就用设计稿宽度/) 28 var baseSize = winWidth / 10; 29 docElem.style.fontSize = baseSize + "px"; 30 } 31 // 调整窗口时重置 32 win.addEventListener("resize", function() { 33 clearTimeout(timer); 34 timer = setTimeout(setFontSize, 300); 35 }, false); 36 // orientationchange 时也需要重算下吧(翻转设备) 37 win.addEventListener("orientationchange", function() { 38 clearTimeout(timer); 39 timer = setTimeout(setFontSize, 300); 40 }, false); 41 // pageshow 42 // keyword: 倒退 缓存相关 43 win.addEventListener("pageshow", function(e) { 44 if (e.persisted) { 45 clearTimeout(timer); 46 timer = setTimeout(setFontSize, 300); 47 } 48 }, false); 49 // 设置基准字体 50 if ("complete" === doc.readyState) { 51 doc.body.style.fontSize = 24/75 + "rem"; 52 } else { 53 doc.addEventListener("DOMContentLoaded", function() { 54 doc.body.style.fontSize = 24/75 + "rem"; 55 }, false); 56 } 57 setFontSize(); 58 }(window, window.lib || (window.lib = {}));
移动端页面适配meta,自适应缩放大小
猜你喜欢
转载自www.cnblogs.com/SeeYouBug/p/9556564.html
今日推荐
周排行