javascript - 如何使用 Javascript/Jquery 重定向到特定窗口宽度的页面？

Question

我使用媒体查询来使我的网站具有响应能力。当您缩小窗口时，它效果很好，但当您将窗口放大而不在中断中关闭一个元素时，它效果很好。 因此，我正在寻找一种方法，当用户在调整窗口大小时达到断点时，重定向到我的网站的“主”页面。 我尝试了这个，但它不起作用:

function reload() {
  var width = $(window).width();
  if (width > 1000) {
    $('.page').hide();
  };
};
reload();

我也尝试过这个，但它也不起作用:

function reload() {
  var w = $(window).width();
  if (w > 1000) {
    window.location.replace("WEBSITE");
    location.reload();
  };
};
reload();

这个重新加载不会停止，但只有当我达到 1000px 时手动重新加载页面。

我也尝试过这个: window.addEventListener('resize', screen_resize);

 function screen_resize() {
        var h = parseInt(window.innerHeight);
        var w = parseInt(window.innerWidth);

        if (w > 1000) {
            window.location.replace("index.html");
            $('.page').hide();
            $('.content').hide();
            $('nav').hide();

        };
    };

但是如果我在达到 1000 像素后调整大小，它会不断重新加载。

非常感谢您的帮助:)

• 一位苦苦挣扎的年轻前端开发人员

Answer 1

函数reload中的代码是静态的，即只有当您调用它时才会执行。如果在调用它时，窗口的宽度不超过 1000px，您的函数将不会执行任何操作。

您需要听resize事件替代:

$(window).resize(function() {
  var w = $(this).width();

  if (w > 1000) {
    window.location.href = "WEBSITE";
  };
});