如何检查浏览器调整大小的条件?

how to check if condition on resize of the browser?

我有一个菜单项登录标记,它通过媒体查询在移动设备上显示不同,如果用户已登录也是如此。

LargeDevice - 已登录 - ShowMarkup

LargeDevice - loggedOut - ShowMarkup

SmallDevice - 已登录 - ShowMarkup

SmallDevice - loggedOut - DoNotShowMarkup

标记的条件在 API 中,所以我有一个 if 条件来检查用户是否像这样注销

  if (acs.user.loggedin === false) {
            $('a.navbar-toggle.icon').hide();
            $('#my-menu').show();
     }

其余部分只用 CSS 完成,并按预期工作。

唯一的问题是,如果用户已注销并在 LargeDevice 上,然后调整到小屏幕。我如何告诉浏览器检查浏览器宽度是否已调整大小以重新检查 acs.user.loggedin 或此问题的其他解决方案?

不是直接从 Javascript 显示和隐藏元素,而是更改您的 JS 代码以将 CSS logged-inlogged-out 类 添加到容器元素.

然后您可以在媒体查询内外使用具有该类名的 CSS 选择器来指定您的四种状态:

@media (max-width: 640px) {
   .logged-out a.navbar-toggle.icon {
       display: none;
   }
}