Javascript 如何隐藏一些div'；从手机浏览器下载。？并显示新的div'；s

我在我的网站上有两个部门

<div class="desktop_1">some desktop site data 1</div>
<div class="desktop_2">some desktop site data 2</div>

一些桌面站点数据1
一些桌面站点数据2

我要问的是，当浏览此页面时，任何移动设备在两次潜水以上被禁用，并在新潜水后显示

<div class="mobile_1">some mobile data 1</div>
<div class="mobile_2">some mobile data 2</div>

一些移动数据1
一些移动数据2

如果检测移动设备解散前两个div，则显示第二个div。。。我怎样才能算出呢。？？？ 我希望你明白我的意思

谢谢

您可以尝试查看允许您单独声明的内容，如下所示：

@media only screen 
and (min-width : 1024px) {
    .desktop_1 {
        /* Styles */
    }
    .desktop_2 {
        /* More Styles */
    }
}

@media only screen 
and (max-width : 320px)
    .mobile_1 {
        /* Styles */
    }
    .mobile_2 {
        /* More Styles */
    }
}

如果

div

s都出现在您的代码中，并且需要隐藏，您可以始终在查询中包含对方媒体的声明，以使其隐藏，如下所示：

@media only screen 
and (min-width : 1024px) {
    .desktop_1 {
        /* Styles */
    }
    .desktop_2 {
        /* More Styles */
    }

    /* Hide Mobile on Desktop */
    .mobile_1 {
        display: none;
        visibility: hidden;
    }
    .mobile_2 {
        display: none;
        visibility: hidden;
    }
}

在移动声明中，反之亦然

 if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)   )   
  {
    $(".desktop1").hide();
    $(".mobile_1").show();
   }

---

未经测试的代码！我想应该可以…你可以看到更多的解决方案。例如，检查如何工作。请检查它是否适用于移动设备，但当测试桌面时。mobile\u 1 div仍然显示在那里，我想隐藏。桌面浏览器中的mobile\u 1 div还使用媒体查询，而不是客户端检测。