如果viewport低于设置的宽度，设置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/

Answer 2

您是否在脚本之前导入了jquery m

 <script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"
type="text/javascript"  >

然后

      <script type="text/javascript"  >
$(document).ready(function() {
function _resizeTDiv()
{
  ..your code here
}
 _resizeTDiv();
$(window).resize(function() {
 _resizeTDiv();
});
});
</script>