2018-11-05

使用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);

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);
  //             }
  //         });
  //     }
  // })();
})();