Html 使用 CSS 在移动设备上隐藏 div

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16922518/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 09:04:15  来源:igfitidea点击:

Hide div on mobile devices, using CSS

csshtmlmobilehide

提问by Christos Baziotis

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

我想从移动设备中隐藏一个包含 Facebook Likebox 小部件的 div。我试过这个,但它不起作用。

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:

css代码:

@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.

我究竟做错了什么?使用 id 或类引用不起作用。

回答by Dan

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.

有关此标签的更多信息,请参阅:了解视口元标签

回答by Christos Baziotis

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>

回答by Muddasir Abbas

Try these it works for me.

试试这些对我有用。

Example 1:

示例 1:

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

Example 2:

示例 2:

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

description link

说明链接

回答by Julian B

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.

我认为您甚至可以忘记使用类。

回答by Laurent

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

只需删除“和(最小设备宽度:0px)”

回答by endi97

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:

如果您正在处理流体网格布局,DW 已经为您创建了 3 个媒体查询。要在手机上隐藏 DIV 仅适用:

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

#div{ display:none; } 诀窍是,您必须将此行添加到平板电脑

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

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

It works for me, hope it's useful.

它对我有用,希望它有用。

回答by Matt

Try this.

尝试这个。

 .mobile-hide{ visibility: hidden; }

edit: sorry, meant to put visibility.

编辑:对不起,意在提高知名度。

回答by Charles

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.

好的,我不久前遇到了这个问题,出于某种奇怪的原因,它仅在我将媒体查询规则放在 css 末尾时才起作用。不知道为什么会这样,也许是某种错误,但请尝试一下,让我们知道它是否有效。

回答by Daniel

Why not add the evil !importantto your display: none?

为什么不把邪恶添加!important到你的display: none

回答by 3045

<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

来源: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.

这段代码应该可以工作,你也可以做一个移动重定向,或者你可以使用 JavaScript 来检测设备(android 或 iPhone),但我建议我将两者结合起来并注意屏幕尺寸。

Other links

其他链接

https://coderwall.com/p/i817wa/one-line-function-to-detect-mobile-devices-with-javascript

https://coderwall.com/p/i817wa/one-line-function-to-detect-mobile-devices-with-javascript

What is the best way to detect a mobile device in jQuery?

在 jQuery 中检测移动设备的最佳方法是什么?