h5监听视窗变化bug?

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

img


快速拉小时:

img

不知道你这个问题是否已经解决, 如果还没有解决的话:
  • 以下回答来自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项目时的视窗宽度计算。


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