移动端页面适配meta,自适应缩放大小【简记】

2018-09-01 05:49:10来源：博客园阅读 ()

 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 = {}));