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

来源：互联网发布：php 获取字符串后4位编辑：程序博客网时间：2024/05/21 01:57

话说这应该是移动开发小伙伴们经常用的一段代码，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'));     //这个写在其功能函数里就好

0 0