【问题标题】:Hide div on mobile devices, using CSS使用 CSS 在移动设备上隐藏 div
【发布时间】: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-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 或类引用。

【问题讨论】:

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

标签: css html mobile hide


【解决方案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-width="220" data-height="250" 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

                    【讨论】:

                    • 这是我的视口元标记。
                    猜你喜欢
                    • 1970-01-01
                    • 2015-04-26
                    • 1970-01-01
                    • 1970-01-01
                    • 2016-04-04
                    • 2018-07-30
                    • 1970-01-01
                    • 1970-01-01
                    • 2016-02-20
                    相关资源
                    最近更新 更多