Question

我在我的网站上有两个div，

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

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

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

如果检测到移动设备前两个潜水，那么显示第二个div ...我怎么能算出来。??? 我希望你能得到我的意思......

感谢

Answer 1

您可以尝试查看Media Queries，这样您就可以单独声明它们：

@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出现在你的代码中并且需要隐藏，你可以在查询中包含相反媒体的声明，使其隐藏起来，如下所示：

@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;
    }
}

反过来在移动宣言中。

Answer 2

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

未经测试的代码！我猜应该工作......您可以看到更多解决方案here

我怎么能从移动浏览器中隐藏一些div。并显示新的div。

2 个答案: