移动端web开发之坑--自适应布局下的返回页面位置定位问题

话说这应该是移动开发小伙伴们经常用的一段代码，1rem=100px;兼容性也很好；然而产生这次问题的重点是doc.addEventListener('DOMContentLoaded', recalc, false); 当dom加载完才会设置根元素的值；（向下页面定位问题描述）

;(function (win,doc){
  // rem响应式兼容设备
  var docEl = doc.documentElement,
      resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
      recalc = function () {
       var clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        if(clientWidth>=750){    //750设计稿的宽
            docEl.style.fontSize = '100px';
        }else{
            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
        }
      };
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(window,document);

---

【功能描述】：点击资讯列表进入详细资讯页后，返回时页面定位在原位置

【产生问题】：位置错误

【原因】：来来来，有问题怎么办，调试咯~

原因一看很明显呀= 。=
此时$(window).scrollTop确实已经被设置了正确的值，但是资讯列表里的样式尺寸偏小。当单位设置正常后，页面伸展，页面偏移。
【解决】
既然这样的话，我们只要先计算单位在设置window的scrollTop就好了啊：）

---

;(function (win,doc){
  // rem响应式兼容设备
  var docEl = doc.documentElement,
      resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
      recalc = function () {
       var clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        if(clientWidth>=750){    //750设计稿的宽
            docEl.style.fontSize = '100px';
        }else{
            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
        }
      }，
      //这里是设置scrollTop的函数
      reScrollTop = function(){    $(window).scrollTop(sessionStorage.getItem('scrollTop'));
      sessionStorage.removeItem('scrollTop');
      /*...*/
      },
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', function(){
        recalc();
        reScrollTop();
   }, false);
})(window,document);

当然如果页面环境简单的话，这样直接写也没什么影响

 var clientWidth = document.documentElement.clientWidth;

        if(clientWidth>=750){    //750设计稿的宽
            docEl.style.fontSize = '100px';
        }else{
            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
  }

$(window).scrollTop(sessionStorage.getItem('scrollTop'));
     //这个写在其功能函数里就好