H5-通用兼容适配函数

目录

 一、封装setFlexible函数

 二、页面里面销毁

---

 一、封装setFlexible函数

function setFlexible() {
  let doc = window.document;
  let docEl = doc.documentElement;
  let dpr = window.top === window.self ? 1 : devicePixelRatio;
  // 设置meta标签
  let metaEl = document.querySelector('meta[name="viewport"]');
  if (!metaEl) {
    metaEl = document.createElement('meta');
    metaEl.name = 'viewport';
    doc.head.appendChild(metaEl);
  }
   // 设置缩放比例
   const scale=1/dpr;
   //设置meta标签内容
   metaEl.content=`initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale}`;
   
   //设置html根元素dpr值
   docEl.setAttribute("data-dpr", dpr);
   function refreshRem() {
     let width=doc.body.clientWidth || docEl.clientWidth;
     const desinWidth=1920; 
     
     if(width / dpr > desinWidth){
       width=desinWidth * dpr;
     }
      if (width <=1200) {
        width=1200;
      }
      const fontSize=(20 * (width / desinWidth)).toFixed(2)+'px';
      //设置html根元素字体大小，如果不支持addEventListener，则直接返回 
      if(doc.addEventListener){
         docEl.style.fontSize=fontSize;   
         window.addEventListener('resize',refreshRem,false);
         return ;
       }else{
          return ;
       }  
    }
    refreshRem();
}
setFlexible();

 二、页面里面销毁

在 React 中，可以通过使用 componentWillUnmount 生命周期函数来销毁 flexBile() 函数：
componentWillUnmount() {
    window.removeEventListener('resize', this.refreshRem);
}