javascript - 使用 JS 在某些浏览器大小中加载时隐藏元素/符号？ (Adobe Edge 动画)

Question

**注意这是使用 Adob​​e Edge Animate。我尝试过媒体查询和预制 HTML 文件，但要获得我正在寻找的内容，我需要将其作为边缘舞台。

所以我的元素“mobileNav”和“deskNav”中有 2 个菜单作为符号。我的目标是让 mobileNav 在 <=800 时加载，而 deskNav 在 >=800 时加载。

截至目前，它会加载这两个符号，直到浏览器 flex 为止。这是一个screenshot通过 imgur。

我的“compositionReady”代码是:

    $(window).resize(function() {
if ($(window).width() <= 799) {
   //alert('Less than 799');
   sym.$("deskNav").css("visibility","hidden");
   sym.$("mobileNav").css("visibility","visible");
}
else {
   //alert('More than 799');
   sym.$("deskNav").css("visibility","visible");
   sym.$("mobileNav").css("visibility","hidden");
}

我希望它根据浏览器(移动和桌面)的大小只加载一个或另一个

提前致谢!

Answer 1

您可以使用媒体查询来隐藏/显示导航选项

@media screen and (max-width: 800px)  {
  .deskNav
   {
     display:none;
   }
  .mobileNav
   {
     display:block;
   }
}
@media screen and (min-width: 801px)  {
  .deskNav
   {
     display:block;
   }
  .mobileNav
   {
     display:none;
   }
}