如果视口低于设定宽度,则隐藏DIV

Question

我一直在努力/寻找这个具体的想法,但我似乎无法找到解决方案.

基本上我正在使用wordpress插件,其中显示了一段内容,除了移动设备外,它工作正常.

我试图通过在视口达到一定宽度时隐藏DIV来解决这个问题.

这是我到目前为止:

<script>
jQuery(document).ready(function () {
var screen = $(window)    
if (screen.width() < 800) {
    $("#attentionGrabber").hide();
}
else {
    $("#attentionGrabber").show();
}
});</script>

这是假设#attentionGrabber是我试图控制的div.

我认为这是根据视口显示或隐藏它的最简单方法,但是当我将该代码放在标题中时似乎没有任何事情发生.

Answer 1

您必须绑定到某个事件,以便在调整屏幕大小时运行您的函数.

<script>
jQuery(document).resize(function () {
    var screen = $(window)    
    if (screen.width() < 800) {
        $("#attentionGrabber").hide();
    }
    else {
        $("#attentionGrabber").show();
    }
});
</script>

不过,真的,我会走这条路:

@media screen and (max-width: 799px) {
    #attentionGrabber {display: none}
}

http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/