5

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

div代码：

<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代码：

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

我究竟做错了什么？它不适用于使用 id 或类引用。

4

10 回答 10

7

由于某种原因（我不知道）这有效：

<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>
于 2013-06-05T00:05:41.850 回答
6

确保您的页面定义了视口元标记。

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

有关此标记的更多信息，请参阅：了解视口元标记。

于 2013-06-04T16:09:04.883 回答
6

试试这些对我有用。

示例 1：

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

示例 2：

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

描述链接

于 2015-11-05T15:30:49.787 回答
1

我个人认为您的“显示”参数是错误的，请尝试使用可见性。我测试了它，它对我有用。

这个应该适合你：

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

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

于 2014-01-11T20:29:49.393 回答
0

只需删除“and (min-device-width: 0px)”

于 2014-06-24T22:39:19.843 回答
0

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.

于 2014-01-01T12:25:59.993 回答
0

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

于 2013-06-04T17:29:56.647 回答
0

为什么不将邪恶添加!important到您的display: none?

于 2013-06-04T18:39:43.680 回答
0

尝试这个。

 .mobile-hide{ visibility: hidden; }

编辑：对不起，是为了提高知名度。

于 2013-06-04T16:12:02.180 回答
0 

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

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

此代码应该可以工作，您也可以进行移动重定向，或者您可以使用 JavaScript 来检测设备（android 或 iPhone），但我建议将两者结合起来并注意屏幕尺寸。

其他链接

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

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

于 2019-03-13T22:51:53.937 回答