JavaScript无法根据窗口宽度正确为HTML元素添加类

核心问题是变量作用域冲突：

• 你在全局声明了displaySize，但在displaySizeReader函数内部的if/else分支里，又用let重新声明了同名的局部变量。这导致全局的displaySize根本没被赋值，始终是空字符串。
• 当displayChanger执行判断时，空字符串不匹配"mobile"或"desktop"，直接走else分支调用changeToMobile()，这就是为什么不管窗口宽度多少，始终添加mobile-class的原因。

去掉内部的let，直接给全局的displaySize赋值即可解决：

let displaySize = '';

// 提前缓存DOM元素，避免重复查询提升性能
const menuElement = document.querySelector('.custom-menu-class');

function changeToMobile() {
    menuElement.classList.remove('desktop-class');
    menuElement.classList.add('mobile-class');
}

function changeToDesktop() {
    menuElement.classList.remove('mobile-class');
    menuElement.classList.add('desktop-class');
}

function displaySizeReader() {
    if (screen.width < 992) {
        displaySize = 'mobile'; // 去掉let，直接赋值全局变量
        console.log(displaySize);
    }
    else {
        displaySize = 'desktop'; // 同上，不再声明局部变量
        console.log(displaySize);
    }

    function displayChanger() {
        if(displaySize === "mobile") {
            changeToMobile();
        } else if(displaySize === "desktop") {
            changeToDesktop();
        } else {
            changeToMobile();
        }
    }
    displayChanger();
}

// 页面初始化时执行一次
displaySizeReader();
// 监听窗口大小变化，实时更新类名
window.addEventListener('resize', displaySizeReader);

1. 替换screen.width为window.innerWidth：screen.width是屏幕物理宽度，window.innerWidth是浏览器视口的实际宽度，更符合响应式场景的判断需求。
2. 合并类切换逻辑：可以用一个通用函数减少重复代码：

function toggleMenuClass(isMobile) {
    menuElement.classList.toggle('mobile-class', isMobile);
    menuElement.classList.toggle('desktop-class', !isMobile);
}

之后在判断后直接调用toggleMenuClass(displaySize === 'mobile')即可，不用再写两个单独的切换函数。
3. 给resize事件加防抖：窗口缩放会频繁触发函数，加防抖可以避免性能浪费：

function debounce(func, delay = 200) {
    let timer;
    return function() {
        clearTimeout(timer);
        timer = setTimeout(func, delay);
    };
}

// 替换原resize监听
window.addEventListener('resize', debounce(displaySizeReader));

内容的提问来源于stack exchange，提问作者Mance Rah