web-dev-qa-db-ja.com

CSSを使用して、モバイルデバイスのdivを非表示にする

Facebookライクボックスウィジェットを含む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またはクラス参照を使用しても機能しません。

csshtmlmobilehide
4
Christos Baziotis

私は個人的にあなたの「ディスプレイ」パラメータが間違っていると思います、代わりに可視性を使ってみてください。私はそれをテストしました、そしてそれは私のために働きました。

これはあなたのために働くはずです：

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

クラスの使い方も忘れられると思います。

1
Julian B

流動的なグリッドレイアウトで作業している場合、DWはすでに3つのメディアクエリを作成しています。電話でDIVを非表示にするには、以下を適用するだけです。

#div{ display:none; }秘訣は、この行をタブレットに追加する必要があるということです

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

それは私のために働きます、それが役に立つことを願っています。

0
endi97

これを試して。

 .mobile-hide{ visibility: hidden; }

編集：すみません、可視性を置くことを意味しました。

0
Matt

さて、私はしばらく前にこの問題を抱えていました、そしていくつかの奇妙な理由で、私がメディアクエリルールをcssの最後に置いたときにのみそれは機能しました。それがなぜかわからない、おそらく何らかのバグですが、それを試してみて、それが機能するかどうかをお知らせください。

0
Charles

「と（min-device-width：0px）」を削除するだけです

0
Laurent
<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）を検出することもできますが、この2つを組み合わせて画面サイズに注意することをお勧めします。

その他のリンク

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

jQueryでモバイルデバイスを検出する最良の方法は何ですか？

0
3045

悪を加えてみませんか!importantあなたのdisplay: none？

0
Daniel