移动端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'));
//这个写在其功能函数里就好