html meta标签的作用 - 移动端页面适配

 1 !function(win, lib) {
 2     var timer,
 3         doc     = win.document,
 4         docElem = doc.documentElement,
 5         vp    = doc.querySelector(' [name="viewport"]'),
 6         dpr   = 1,
 7         scale = 1;
 8     // 插入 viewport  
 9     if (!vp ) {
10         vp  = doc.createElement(" ");
11 
12         vp .setAttribute("name", "viewport");
13         vp .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(vp )
18         } else {            // 如果获取不到头部，就用创建元素然后写入发方法来写入到页面里
19             var div = doc.createElement("div");
20             div.appendChild(vp );
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  Size = winWidth / 10;
29         docElem.style.fontSize =  Size + "px";
30     }
31     // 调整窗口时重置
32     win.addEventListener("resize", function() {
33         clearTimeout(timer);
34         timer = setTimeout(setFontSize, 300);
35     }, false);
36     // orientati  时也需要重算下吧（翻转设备）
37     win.addEventListener("orientati ", 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 = {}));