移动端通过设置rem实现页面内容及字体大小自动调整
function setRem(){
var rem = document.documentElement.clientWidth / 10; // 把设备屏幕宽度十等分
document.documentElement.style.fontSize = rem + "px"; // 把文档根字体设置成设备宽度的1/10
}
setRem();
window.addEventListener("resize", setRem); // 添加resize事件,当窗口调整时同步调整文档根字体大小
window.addEventListener("pageShow", function(e) { // 添加pageShow事件,在页面显示时触发
if(e.persisted) { // 判断是否是缓存中取的页面,true即是缓存中取的页面,触发设置根字体的函数
setRem();
}
})
pageShow事件和load事件一样,均是加载页面时即执行函数,通过点击a标签,F5刷新以及点击前进后退按钮均可刷新页面并执行load事件。但火狐有个往返缓存,保留页面数据以及DOM和JS状态,也就是说整个页面均被缓存,所以点击后退也不能刷新页面,所以可以通过pageShow触发,通过判断是否是缓存中取的页面来进行触发