自适应：用JS做的自适应，是最差的自适应，记页面刷新前后尺寸变化

今天遇到一个硬茬，我在使用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里，因此整个页面是小小的一团，什么操作都做不了，什么信息都看不清，用户体验差！

　　怪不得要重构呢！

 

转载于:https://www.cnblogs.com/ww01/p/10008511.html