CSS media to hide/show div in mobile and desktop?

问题

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>

回答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">

回答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>

回答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; }

}

回答4:

this line only find the size resolution of the user system and gives to your css code <meta name="viewport" content="width=device-width, initial-scale=1.0">

来源：https://stackoverflow.com/questions/42925288/css-media-to-hide-show-div-in-mobile-and-desktop

标签

html

css

responsive-design

media-queries