前端resize事件触发时PHP变量$mobileScreenRes值不更新如何解决

问题根因 #

你混淆了PHP和JavaScript的执行时序，这是前后端分离开发的常见误区：

• PHP属于服务端运行的语言，所有<?php ?>包裹的逻辑会在页面返回给用户浏览器之前全部执行完毕，最终只会输出静态内容到页面，不会随浏览器端的操作动态执行。
• JavaScript属于客户端运行的语言，要等浏览器拿到服务端返回的静态资源后，才会在用户本地执行。

你写的代码在服务端执行阶段，会依次跑完所有PHP代码：

1. 先执行<?php $mobileScreenRes = true; ?>将变量设为true
2. 紧接着执行<?php $mobileScreenRes = false; ?>将变量覆盖为false
3. 最终输出到浏览器的JS代码是固定的，和JS运行时走哪个分支没有任何关系，你可以右键查看页面源代码，实际输出的代码如下：

window.addEventListener("resize", function (e){
    var width = document.body.clientWidth;
    console.log(document.body.clientWidth);
    if (width <= 768) { console.log("if: " + true); }
    else { console.log("else : " + false); }
    console.log("final:" + false);
    console.log("isset :" + 1);
});

这就是为什么不管你触发JS的if还是else分支，final打印的变量值始终是false，因为这个值是PHP提前输出死的，和前端运行时逻辑完全无关。

解决方案 #

如果需要根据屏幕宽度调整后端逻辑，你可以选择两种实现方式：

• 前端判断屏幕宽度后，通过AJAX请求将结果主动传给后端接口，再由PHP处理对应逻辑
• 直接把和屏幕宽度相关的交互逻辑放到前端用JavaScript实现，不要依赖PHP变量做判断

内容的提问来源于stack exchange，提问作者Fatih Parlağı