h5监听视窗变化bug？

Question

电脑端微信打开h5项目，快速拉大拉小视窗，当视窗快速拉小时获取的视窗宽度有问题（比实际的大）
正常情况下（拉大时左右都有空余的情况才654）：

快速拉小时：

Answer 1

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 以下回答来自chatgpt:

  回答：该问题可能属于电脑端微信处理视窗变化的问题，解决方案如下：

  1.尝试监听窗口resize事件，及时更新视窗宽度。

  代码如下：

  window.onresize = function(){
     let pageWidth = document.documentElement.clientWidth;
     //使用pageWidth做相关计算
  }
  

  2.尝试使用CSS媒体查询来控制视窗缩放，避免出现宽度计算错误的问题。

  例如：

  @media (max-width: 768px){
    //在此设定相关样式
  }
  

  3.如果以上方法无效，可以尝试使用JS debounce函数来控制resize事件的触发频率，降低计算错误的风险。

  代码如下：

  function debounce(func, wait, immediate) {
      let timeout;
      return function() {
          let context = this, args = arguments;
          let later = function() {
              timeout = null;
              if (!immediate) func.apply(context, args);
          };
          let callNow = immediate && !timeout;
          clearTimeout(timeout);
          timeout = setTimeout(later, wait);
          if (callNow) func.apply(context, args);
      };
  };
  
  window.onresize = debounce(function(){
    let pageWidth = document.documentElement.clientWidth;
    //使用pageWidth做相关计算
  }, 300);
  

  4.还可以检查页面中是否存在其他的元素或JS代码对视窗宽度做出了修改，例如设置了固定宽度或使用JS来改变了宽度值，要尽量保证这些改变不会影响到微信打开H5项目时的视窗宽度计算。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^