使用Flexible实现手淘H5页面的终端适配

- lib-flexible

再聊移动端页面的适配

如何在Vue项目中使用vw实现移动端适配

    !(function(t, document) {
      var n = document.documentElement,
        r = t.devicePixelRatio || 1;
      function i() {
        var t = n.clientWidth / 10;
        n.style.fontSize = t + 'px';
      }
      if (
        ((function t() {
          document.body
            ? (document.body.style.fontSize = 12 * r + 'px')
            : document.addEventListener('DOMContentLoaded', t);
        })(),
        i(),
        t.addEventListener('resize', i),
        t.addEventListener('pageshow', function(t) {
          t.persisted && i();
        }),
        r >= 2)
      ) {
        var o = document.createElement('body'),
          s = document.createElement('div');
        (s.style.border = '.5px solid transparent'),
          o.appendChild(s),
          n.appendChild(o),
          1 === s.offsetHeight && n.classList.add('hairlines'),
          n.removeChild(o);
      }
    })(window, document);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

    var PAGE_MAX_WIDTH = 640,
      BASE_FONT_SIZE = 50;
    //在窗口各宽情况时，动态计算出html的font-size
    !(function() {
      var DOC_ROOT_STYLE = document.documentElement.style,
        docEle = document.documentElement || document.body;

      window.addEventListener('load', resizeFontSize);
      window.addEventListener('resize', resizeFontSize);
      resizeFontSize();

      function resizeFontSize() {
        var clientWidth = Math.max(docEle.clientWidth || 0, window.innerWidth || 0);

        DOC_ROOT_STYLE.fontSize =
          Math.min(
            (clientWidth / PAGE_MAX_WIDTH) * BASE_FONT_SIZE,
            BASE_FONT_SIZE,
          ) + 'px';
      }

      window.alert = function(name) {
        var iframe = document.createElement('IFRAME');
        iframe.style.display = 'none';
        iframe.setAttribute('src', 'data:text/plain,');
        document.documentElement.appendChild(iframe);
        window.frames[0].window.alert(name);
        iframe.parentNode.removeChild(iframe);
      };
      // (function androidInputBugFix() {
      //     // .container 设置了 overflow 属性, 导致 Android 手机下输入框获取焦点时, 输入法挡住输入框的 bug
      //     // 解决方法:
      //     // 0. .container 去掉 overflow 属性, 但此 demo 下会引发别的问题
      //     // 1. 参考 http://stackoverflow.com/questions/23757345/android-does-not-correctly-scroll-on-input-focus-if-not-body-element
      //     //    Android 手机下, input 或 textarea 元素聚焦时, 主动滚一把
      //     if (/Android/gi.test(navigator.userAgent)) {
      //         window.addEventListener('resize', function () {
      //             if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {
      //                 window.setTimeout(function () {
      //                     document.activeElement.scrollIntoViewIfNeeded();
      //                 }, 0);
      //             }
      //         });
      //     }
      // })();
    })();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46