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

Posted 2023-02-21

技术标签:

【中文标题】使用 CSS 在移动设备上隐藏 div【英文标题】：Hide div on mobile devices, using CSS 【发布时间】：2013-05-31 03:00:50 【问题描述】：

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

div 代码：

<div id="facebook" class="fb-like-box mobile-hide" data-href="https://www.facebook.com/mypage" data- data- 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 或类引用。

【问题讨论】：

你对这个元素还有其他的 CSS 规则吗？设备的宽度分辨率是多少，可能大于720 我什至尝试过 960。我认为这不是问题。它对我有用。您是否有定义新显示的 .fb-like-box lower down 规则？ jsfiddle.net/H4vzE 不，没有别的... 【参考方案1】：

<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

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

【讨论】：

【参考方案2】：

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

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

【讨论】：

【参考方案3】：

试试这些对我有用。

示例 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;

description link

【讨论】：

【参考方案4】：

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

【讨论】：

【参考方案5】：

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

这个应该适合你：

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

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

【讨论】：

【参考方案6】：

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

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

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

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

【讨论】：

【参考方案7】：

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

【讨论】：

【参考方案8】：

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

【讨论】：

【参考方案9】：

试试这个。

 .mobile-hide visibility: hidden;

编辑：抱歉，是为了提高知名度。

【讨论】：

【参考方案10】：

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

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

有关此标签的更多信息，请参阅：Understanding The Viewport Meta Tag。

【讨论】：

这是我的视口元标记。