我想在移动设备上隐藏包含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或类引用不起作用。
确保您的页面定义了一个视口元标记。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
有关此标记的更多信息,请参阅:Understanding The Viewport Meta Tag。
<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
出于某种原因(我不知道)这有效:
<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>
试试这些对我有用。
例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; }
}
我个人认为你的“显示”参数是错误的,尝试使用可见性。我测试了它,它对我有用。
这个应该适合你:
@media only screen and (min-device-width: 0px) and (max-device-width: 720px) {div#facebook {visibility:hidden;}}
我想你甚至可以忘记课程的使用。
试试这个。
.mobile-hide{ visibility: hidden; }
编辑:对不起,意思是提高知名度。
好吧,我有一段时间没有这个问题,并且由于一些奇怪的原因它只有在我把我的媒体查询规则放在CSS的末尾时才有效。不知道为什么会这样,也许是某种类型的错误,但试一试,让我们知道是否有效。
为什么不把邪恶的!important
添加到你的display: none
?
如果您正在处理流体网格布局,DW已经为您创建了3个媒体查询。要在手机上隐藏DIV,请仅申请:
#div{
display:none;
}
诀窍是,您必须将此行添加到平板电脑
#div{
display:block; //or inline or anything, how you wish to display it
}
它对我有用,希望它有用。
只需删除“和(min-device-width:0px)”