jquery - 如果视口(viewport)低于设定宽度，则隐藏 DIV

Question

一段时间以来，我一直在努力/寻找这个特定的想法，但我似乎找不到解决方案。

基本上我使用的是一个 wordpress 插件，其中显示了一段内容，除了移动设备外它工作正常。

我试图通过在视口(viewport)达到特定宽度时隐藏 DIV 来解决此问题。

这是我目前所拥有的:

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

这是假设#attentionGrabber 是我要控制的 div。

我认为这是根据视口(viewport)显示或隐藏它的最简单方法，但是当我将该代码放在标题中时似乎没有任何反应。

Answer 1

您必须绑定(bind)到某个事件，以便您的函数在调整屏幕大小时运行。

<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/