因为项目需要，分别写了移动端和PC端的两个html页面，现在需要根据不同的屏幕宽度来加载对应的页面。
先说一下本人的思路--
刚开始我直接在加载页面的时候判断屏幕宽度，然后加载相应的页面，大家是不是也想到会出现什么效果了？
没错，这个时候就出现了浏览器一直在加载切换页面的死循环！因为每次刷新页面都执行同一段js代码。。。
所以就要想办法存储刷新前的屏幕大小状态，在刷新页面的时候拿刷新前状态与刷新后状态对比，然后再决定加载哪个页面。
那么问题就来了，我们通过什么来存储这个状态呢？
这个时候就想起了h5的新特性(本地存储):
1. localStorage 长期存储数据，浏览器关闭后数据不丢失；
2. sessionStorage 的数据在浏览器关闭后自动删除。
而这次主要是通过临时存储(sessionStorage)来判断根据屏幕宽度变化来加载对应的页面的，直接看js代码：
// 通过临时存储(sessionStorage)来判断根据屏幕宽度变化来加载 移动端页面 / PC端页面 var indexUrl = "http://192.168.10.173:8020/art-preSale/index.html?__hbt=1515730525577"; //PC端
var indexMobileUrl = "http://192.168.10.173:8020/art-preSale/index-m.html?__hbt=1516171504432"; //移动端 var newState = 0; //记录当前是大屏幕(1)还是小屏幕 (0)
resizeUnit(); //初始化加载页面 //浏览器窗口变化时也要初始化加载页面
window.onresize = function(){
resizeUnit();
} /**
* 刷新页面时加载对应的页面
* @param {Object} width 加载不同页面的分界点(屏幕宽度),默认不传参就是768
*/
function resizeUnit(width){
var width = width || 768;
var windowWidth = window.innerWidth; //获取可视窗口大小
//var windowWidth = window.screen.width;
// 判断窗口大小 以传入的宽度为分界点
if(windowWidth<width){
newState = 0;
}else {
newState = 1;
}
//判断sessionStorage是否存在 "oldState"
if(sessionStorage.getItem('oldState')){
//刷新后sessionStorage已保存有刷新前的状态，则获取该值，与当前状态值进行对比
var oldState = sessionStorage.getItem('oldState');
if(newState!=oldState){
sessionStorage.setItem('oldState', newState); // 重置为当前状态值
getHtml(newState); // 跳转到相应的html页面
}
}else{
//保存刷新前的状态数据到sessionStorage
sessionStorage.setItem('oldState', newState); //初始化的时候设置
getHtml(newState);
}
} /**
* 根据状态跳转相应的html页面
* @param {Object} state 当前屏幕宽度的状态 （1为大屏幕，0为小屏幕）
*/
function getHtml(state) {
if(state==1){
window.location.replace(indexUrl);
}else if(state==0){
window.location.replace(indexMobileUrl);
}
};
以上代码经测试是可行的，有问题欢迎提出哦！
有人跟我推荐使用浏览器本身的cookie来实现加载不同页面的功能， 因为cookie是所有浏览器都支持的，有时间可以尝试一下 ：）