今天遇到一個硬茬，我在使用weui重構一個頁面時，出現一個問題：路由進入頁面時，頁面內容尺寸硬是會變大，重新整理後又恢復正常：

專案背景：一個使用react-starter-kit構建的B端SPA專案

上圖：

出現問題時的情況：

重新整理後（它本應該的樣子）：

 折騰了一個下午，各種請教團隊裡的大神，原因如下：

在我的頁面的上一個頁面，也就是跳轉過來的那個頁面，用了這樣的自適應方案：rem+計算font-size的function，其中計算在componentDidMount時執行，函式體如下：

function PageInit() {
  
 
if (
    navigator.userAgent.match(
      /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i,
    )
  ) {
    //console.log('-----是否shouji-', $);
    var docEl = document.documentElement
    const htmlFontsize 
 
= docEl.clientWidth * 20 / 375;
    if(!htmlFontsize) return;
    docEl.style.fontSize = htmlFontsize + 'px';
  };
};

看似沒問題，實則大問題：

　　由於我的尺寸也用rem，那麼在上一個頁面改變的document的根font-size，會影響到下一個頁面的font-size，因為元件未解除安裝相應的東西或者說CSS有殘留，導致我的整體尺寸變化。為什麼重新整理後恢復正常？那是因為重新整理後React會重新構建整個DOM樹，因此根font-size是被改變之前的，所以頁面尺寸會正常。另外，利用這種自適應方案，頁面展示時，首先會是比較小的，然後會有跳一下變大的效果出現，給人一種山寨的感覺，當我的網速差時，頁面會卡在componentDidMount裡，因此整個頁面是小小的一團，什麼操作都做不了，什麼資訊都看不清，使用者體驗差！

　　怪不得要重構呢！