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