CSS媒体可在移动设备和台式机中隐藏/显示div？

Question

我有这个真实的代码来显示和隐藏两个div，具体取决于设备类型：

问题：在Android中，显示#div桌面。

• 我只需要在移动设备上显示div＃div-mobile

• 我只需要在台式机设备上显示div＃div-desktop

的CSS

        @media screen and (min-width: 0px) and (max-width: 700px) {
      #div-mobile {    display: block;  }
      #div-desktop {    display: none;  }
    }

    @media screen and (min-width: 701px) and (max-width: 3000px) {
      #div-mobile {    display: none;  }
      #div-desktop {    display: block;  }

}

的HTML

<div id="div-mobile">m<img width="100%" height="auto" src="http://uggafood.com/wp-content/uploads/2017/03/ugga-food_mobile.jpg" alt="" width="600" height="1067" /></div>


<div id="div-desktop">d<img width="100%" height="auto"  src="http://uggafood.com/wp-content/uploads/2017/03/ugga-food_desktop.jpg" alt="" width="1920" height="1280" /></div>

Answer 1

我刚刚检查了实时链接。

响应设备缺少元标记。

添加以下代码以检测移动设备。

<meta name="viewport" content="width=device-width, initial-scale=1.0">