Hide div on mobile devices, using CSS

问题

I want to hide a div containing the facebook likebox widget from mobile devices. I tried this but it doesn't work.

div code:

<div id="facebook" class="fb-like-box mobile-hide" data-href="https://www.facebook.com/mypage" data-width="220" data-height="250" data-show-faces="true" data-stream="false" data-header="true"></div>

css code:

@media screen and (min-width: 0px) and (max-width: 720px) {
  #facebook { display: none; }
  .mobile-hide{ display: none; }
}

What am i doing wrong? It does not work using the id or the class reference.

回答1:

Make sure your page defines a viewport meta tag.

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

For more information on this tag see: Understanding The Viewport Meta Tag.

回答2:

For some reason (unknown to me) this worked:

<div  class="mobile-hide">
<div class="fb-like-box" data-href="https://www.facebook.com/mypage" data-width="220" data-height="250" data-show-faces="true" data-stream="false" data-header="true"></div>
</div>

回答3:

Try these it works for me.

Example 1:

@media only screen and (max-width: 479px) {
   .mobile-hide{ display: block !important; }
}

Example 2:

@media only screen and (max-width: 479px) {
   .mobile-hide{ display: none !important; }
}

description link

回答4:

I personally think your "display" parameter is the wrong one, try using visibility instead. I tested it and it worked for me.

This one should work for you:

@media only screen and (min-device-width: 0px) and (max-device-width: 720px) {div#facebook {visibility:hidden;}}

I think you can even forget about the use of a class.

回答5:

Try this.

 .mobile-hide{ visibility: hidden; }

edit: sorry, meant to put visibility.

回答6:

Okay I had this problem a while back, and for some odd reason it only worked when i put my media query rules at the end of the css. Don't know why that is, maybe a bug of some sort, but give that a try and let us know if that works.

回答7:

Why not add the evil !important to your display: none?

回答8:

If you are working on a fluid grid layout, DW already created the 3 media queries for you. To hide a DIV on phone only apply:

#div{ display:none; } The trick is,that you have to add this line to tablet

#div{ display:block; //or inline or anything, how you wish to display it }

It works for me, hope it's useful.

回答9:

Just delete the "and (min-device-width: 0px)"

回答10:

<style type="text/css">
  .mobileShow {
    display: none;
  }
  /* Smartphone Portrait and Landscape */
  
  @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    .mobileShow {
      display: inline;
    }
  }
</style>
<!--.mobileHide{ display: none;}-->

<style type="text/css">
  .mobileHide {
    display: inline;
  }
  /* Smartphone Portrait and Landscape */
  
  @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    .mobileHide {
      display: none;
    }
  }
</style>

<body>
  <div class="mobileHide">
    <p>TEXT OR IMAGE NOT FOR MOBILE HERE
      <p>
  </div>
  <p> yep its working</p>
  <div class="mobileHide">
    <p>THIS SHOULD NOT SHOW On Mobile (view in mobile mode)
      <p>
  </div>
</body>

Source: https://blog.hubspot.com/marketing/site-content-only-mobile-viewers-can-see-ht

This code should work, You could also do a mobile redirect, or you can use JavaScript to detect the device (android or iPhone) though I would recommend I combination of the two and take note of screen sizes.