仅当窗口宽度从桌面（> 1024px）更改为移动（<1025px）导航时如何重新加载页面？

Question

我有一个仅在 1025 像素以下运行的移动导航。 我的问题是，当桌面浏览器从超过 1024 调整大小（或在更大的平板电脑上发生方向变化）时，它不再激活脚本。我曾尝试在调整大小时重新加载，但这并不理想，因为它会在每次调整大小时重新加载。

这是我的代码：

<script>
    $(window).bind('resize', function(e)
    {
      if (window.RT) clearTimeout(window.RT);
      window.RT = setTimeout(function()
      {
        this.location.reload(false);
      }, 100);
    });

    if (document.documentElement.clientWidth <= 1024) {
      // Initialize mobile nav
    }
</script>

谢谢！

Answer 1

在每个分辨率中添加类并请求它们。

$( window ).resize(function() {
if(($(window).width()>1024 && $(".navigation").hasClass("mobile")) || ($(window).width()<1025 && $(".navigation").hasClass("desktop")))
this.location.reload();
}

但您应该考虑不要重新加载，而是通过 css 媒体查询隐藏/显示导航。重新加载是用户体验的痛苦:-)

更好的解决方案：

在你的 CSS 中：

.desktop {
    display: block;
}
.mobile {
    display: none;
}
@media only screen and (max-width: 1025px) {
.desktop {
        display: none;
    }
    .mobile {
        display: block;
    }
}

在您的 html 中：

<div class="navigation desktop">your desktop navigation</div>
<div class="navigation mobile">your mobile navigation</div>

不需要 js。