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やclassの参照ではうまくいきません。
どういうわけか(私には知られていない)これはうまくいきました:
<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>
個人的には、「表示」パラメータが間違っていると思います。代わりに可視性を使用してみてください。 私はそれをテストしました、そしてそれは私のために働きました。
これはあなたのために働くべきです:
@media only screen and (min-device-width: 0px) and (max-device-width: 720px) {div#facebook {visibility:hidden;}}
クラスの使い方も忘れられると思います。
<。!-スニペットを開始:js hide:false console:true babel:false -->。
<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。
https://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery。