一个移动端的h5适配网上找方案.js的方式

我最近做了一个移动 h5 改编。基本都是用flexible.js在网上找的解决办法，然后我也掉进了这个坑。

引用flexible.js的方式无非就是cdn介绍：

将文件下载到本地或 npm 安装。

源代码如下：

灵活的.js

介绍完后发现遇到了各种奇怪的问题。例如，如果在元素上设置类来指定元素的大小，那么当屏幕的比例发生变化时引入js文件没有用，字体也会随着比例发生变化。比如在一些安卓手机上引入js文件没有用， dpr 或者 scale 会没有值，导致适配方案失败。这些问题是在判断的时候没有考虑所有情况造成的，但是网上找到的解决方法都是这样的。是我的写法有问题，还是介绍的版本有问题？带着对自己的疑惑，找了一个下午才找到这个github。

这说明之前的flexible.js是可以弃用的，而且不管哪个版本有问题，那么正确的使用方式应该是在代码中引入如下文件：

(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1
  // adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();
  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }
  setRemUnit()
  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })
  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))

并添加 html

这样就完成了移动端的h5适配，和网上找的解决方案不同。