使用JS加载某些浏览器大小时隐藏元素/符号？ （Adobe Edge Animate）

Question

**请注意，这是使用Adobe Edge Animate。我已尝试过媒体查询和预先制作的HTML文件，但为了得到我想要的内容，我需要将其作为边缘舞台。

所以我的项目中有2个菜单作为符号＆＃39; mobileNav＆＃39;和＆＃39; deskNav＆＃39;。我的目标是在＆lt; = 800时加载mobileNav，在＆gt; = 800时加载deskNav。

截至目前，它会在浏览器弯曲之前加载这两个符号。这是一个screenshot来自imgur。

我的代码＆＃39; compositionReady＆＃39;是：

    $(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;
   }
}

Answer 2

A）你看得太深了：

<强> HTML：

<p class="mobile">Hello world</p>
<p class="desktop">Hello world</p>

使用这两个元素单独定义您的网页以节省时间。

尝试调整窗口大小： http://jsfiddle.net/3vXpR/1/

B）媒体查询，而不是Javascript：

<强> CSS：

@media screen and (min-width: 801px)  {
    .desktop {
        display: block;
    }
    .mobile {
        display: none;
    }
}
@media screen and (max-width: 800px)  {
    .desktop {
        display: none;
    }
    .mobile {
        display: block;
    }    
}
.desktop {
    color:#CCC;
}
.mobile {
    color:#FCC;
}

CSS可以比jQuery更好地处理浏览器调整> 。

尝试调整窗口大小： http://jsfiddle.net/3vXpR/1/

OR ...

只需使用能为您完成所有事情的framework。

退房：

• http://foundation.zurb.com/ （简单）
• http://getbootstrap.com/getting-started/ （硬）