Jquery window.resize(event) => {} 适用于检查元素，但不适用于调整 chrome（或边缘）window 的大小时

Question

有很多关于调整大小（事件）无法在线工作的问题，但我只能找到 one 实际上反映了我的确切问题但没有答案。

当我使用inspector时，当我的网站到达<= 540px宽度的断点时，我的网站从桌面版切换到移动版。但是，当我调整整个 chrome window 的大小时，没有任何反应（即使我的 window 宽度确实小于 540px）。

我不确定移动版本是否真的可以在手机上运行，因为我目前无法测试它，但我不确定这是否是 Chrome 和该网站将在桌面和移动设备上完美运行，或者我做错了什么。

相关代码：

$(window).resize((event) => {

      const windowWidth = window.screen.width;
      if (windowWidth <= 540) {

        $('.className1').addClass('d-none');
        $('.classname2').css("width", "100%");
        $('.classname3').css("left", "3%");
        $('.classname3').css("width", "100%");
        $('.classname4').css("width", "90%");

这不是整个方法，但它基本上显示了 css 和属性根据 window 宽度下降到 540px 以下而变化的想法。

我尝试了什么：

Document.resize（失败）

我真的希望这不是重复的，很难浏览那里的大量问题。

Answer 1

问题不在于 resize 事件或浏览器。发生这种情况是因为您正在使用 window.screen.width，它是相对于屏幕，而不是浏览器 window。调整浏览器大小没关系window，屏幕宽度不会改变。例如，如果您的屏幕分辨率为 1900x1200，则 screen.width 将始终为 1900。因此，您应该使用 window.innerWidth，或仅使用 innerWidth 来获取视口宽度。要了解更多信息，请参阅。

你的代码应该是这样的：

(window).resize((event) => {

  if (innerWidth <= 540) {

    $('.className1').addClass('d-none');
    $('.classname2').css("width", "100%");
    $('.classname3').css("left", "3%");
    $('.classname3').css("width", "100%");
    $('.classname4').css("width", "90%");

工作代码示例（在整页中打开代码段并调整其大小）：

  $(window).resize((event) => {
      if (innerWidth <= 540) {
          document.write('It\'s working.');
      }
  });

<html>
    <body>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    </body>
</html>

Jquery window.resize(event) => {} 适用于检查元素，但不适用于调整 chrome（或边缘）window 的大小时

Jquery window.resize(event) => {} works for inspect element but not when the chrome (or edge) window is resized

html

javascript

css

jquery

window-resize