CSS 媒体在移动设备和桌面设备中隐藏/显示 div？

Question

I have this real code to show and hide two divs depending on device type:

Problem : in Android the #div-desktop is shown.

• I need to show only div#div-mobile on mobile devices

• I need to show only div#div-desktop on desktop devices

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

I have just checked the live link.

Meta tag is missing for responsive devices.

Add the below code for detecting mobile devices.

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

Answer 2

EDIT After seeing your site, you need to add:

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

---

You can just use min-width

Also, don't use width/height html tags in img use CSS instead

---

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

 <div id="div-mobile">m<img src="http://uggafood.com/wp-content/uploads/2017/03/ugga-food_mobile.jpg" alt="" /></div> <div id="div-desktop">d<img src="http://uggafood.com/wp-content/uploads/2017/03/ugga-food_desktop.jpg" alt="" /></div>

Answer 3

Change your media queries to the following.

Just change the widths to whatever you'd like. The top media query says if the min width is above standard mobile sizes show xyz , then the second one says if it's below do abc .

@media screen and (min-width: 769px) {

    #div-mobile { display: none; }
    #div-desktop { display: block; }

}

@media screen and (max-width: 768px) {

    #div-mobile { display: block; }
    #div-desktop { display: none; }

}

Answer 4

此行仅查找用户系统的大小分辨率并提供给您的 css 代码<meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 5

If you use sass, this is a very efficient way of effecting media queries and writing appropriate css per devise: https://eduardoboucas.github.io/include-media

include-media is a Sass library for writing CSS media queries in an easy and maintainable way, using a natural and simplistic syntax.