Jquery window.resize事件在浏览器调试工具中生效但Chrome/Edge窗口调整时失效问题排查

嘿，我立刻就发现你代码里的问题啦！

核心错误：用错了宽度属性 #

你现在用的window.screen.width是设备屏幕的固定宽度——比如你桌面显示器是1920px，这个值就永远是1920，不管你把浏览器窗口拉多窄都不会变！这就是为什么手动调整窗口大小没反应，但调试工具的设备模拟器能生效（因为模拟器会模拟不同的屏幕尺寸）。

你需要的是浏览器当前可视窗口的宽度，应该用下面两个属性之一：

• $(window).width()：jQuery封装的窗口宽度，比较省心
• window.innerWidth：原生JS的窗口宽度，包含滚动条宽度（如果有的话）

修正后的代码示例 #

我帮你调整了代码，还补上了窗口变大时恢复样式的逻辑（不然缩小后再放大，样式会一直停在移动端状态）：

$(window).resize((event) => {
  const windowWidth = $(window).width(); // 替换成正确的窗口宽度属性
  if (windowWidth <= 540) {
    $('.className1').addClass('d-none');
    $('.classname2').css("width", "100%");
    // 多个css属性可以合并写，更简洁
    $('.classname3').css({
      "left": "3%",
      "width": "100%"
    });
    $('.classname4').css("width", "90%");
  } else {
    // 窗口宽度超过540px时，恢复原有样式
    $('.className1').removeClass('d-none');
    $('.classname2').css("width", "");
    $('.classname3').css({
      "left": "",
      "width": ""
    });
    $('.classname4').css("width", "");
  }
});

// 页面加载时先执行一次，确保初始宽度符合条件时样式生效
$(document).ready(function() {
  $(window).trigger('resize');
});

更优的替代方案：CSS媒体查询 #

其实做响应式布局，优先用CSS媒体查询比JS更高效，也更符合前端最佳实践——不需要依赖JS，浏览器会自动适配：

@media (max-width: 540px) {
  .className1 {
    display: none;
  }
  .classname2 {
    width: 100%;
  }
  .classname3 {
    left: 3%;
    width: 100%;
  }
  .classname4 {
    width: 90%;
  }
}

如果用的是Bootstrap，直接给元素加d-none d-md-block类就能实现屏幕小于md（576px，接近你的540px）时隐藏，更省心！

内容的提问来源于stack exchange，提问作者Miss Skooter