实现原理介绍首先通过js监听窗口变化事件,如果窗口变化了触发事件,从新刷新页面将分辨率采用键值对的形式存入到cookie中,最后通过php的形式将cookie中的分辨率数据拿出来使用
下面是js代码
<script>
//监听窗口变化事件
window.addEventListener('resize', function() {
//如果窗口发生变化从新刷新页面
location.reload();
//控制台输入监听到的宽度存到screenX 中
console.log('已监听到页面宽度发生变化' + document.documentElement.clientWidth);
var screenX = document.documentElement.clientWidth;
//创建cookie键值对字符串存到cookie中
var cookieStr = "screenX =" + screenX
document.cookie = cookieStr;
})
</script>
下面是php代码
//从cookie中采用php通过存入的key得到宽度,然后在做自己的逻辑判断
$numberScreenWidth = $_COOKIE['screenX'];
if ($numberScreenWidth > 1900) {
$pages = 4;
} else {
$pages = 3;
}