移動端webview屏幕自適應寫法+Echarts自適應寫法

首先新建一個rem.js文件，放到公共js文件夾，如下：

(function(doc, win) {
  const docEl = doc.documentElement;
  const isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
  const dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1;
  // 被iframe引用時，禁止縮放
  const dps = window.top === window.self ? dpr : 1;
  const resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
  docEl.dataset.dpr = dps;
  function recalc() {
    let width = docEl.clientWidth;
    if (width / dps > 750) {
      width = 750 * dps;
    }
    docEl.dataset.width = width;
    docEl.dataset.percent = 100 * (width / 750);
    docEl.style.fontSize = 100 * (width / 750) + 'px';
  }
  recalc();
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
})(document, window);

然后在main.js中引入rem.js 模塊

import './utils/rem.js';

如果要在Echarts中使用rem那么需要額外做一些工作

 

 如圖，在繪制函數的外部注冊一個rem轉換px的函數，如下：

    function remToPx(rem) {
      const fontSize = document.documentElement.style.fontSize;
      return Math.floor(rem * fontSize.replace('px', ''));
    }

在相應的地方調用這個函數，將rem的值填入其中就可以了，本質上還是將rem根據fantsize的值轉換為px，因為Echarts內部只接受px單位的數據。