Question

我有这段代码：

<script type="text/javascript">
        var snapper = new Snap({
            element: document.getElementById('content'),
            disable: 'right'

        });
</script>

我希望它仅在窗口宽度小于或等于768px时运行/打开。我怎么用javascript做这个？

由于

Answer 1

使用window.onresize事件。

window.onresize = function ()
    {
        if (window.innerWidth <= 768)
        {
            var snapper = new Snap({
                element: document.getElementById('content'),
                disable: 'right'

            });
        }

    }

请注意，这只会在调整窗口大小时触发，并且您可能希望使用jQuery的$(window).width()而不是纯javascript since it can be a little wonky。此外，如果要撤消在上面的if语句中所做的操作，则需要使用适当的代码附加else块。最后，如果优化打击你的想象并且你想避免运行不必要的代码（例如，如果窗口被调整为768并且随后700，则没有理由两次都运行if块）你可能想要设置一个标志由if和else if块检查（您的else块将变为else if），以防止在不需要时创建新的Snap。< / p>

Answer 2

使用window.innerWidth属性确定视口的宽度。请注意，此包含垂直滚动条。

if(window.innerWidth <= 768) {
    // your code
}

来源：https://developer.mozilla.org/en-US/docs/Web/API/window.innerWidth

请注意，在IE9之前的IE版本中，innerWidth属性不可用; Safari 3之前的Safari;和Opera之前的Opera。

Answer 3

考虑使用modernizr media query功能来确定您是否要运行此代码。

您可以像在CSS中一样进行媒体查询，如果是，则运行您的代码。

if(Modernizr.mq('(max-width: 767px)'){
    //your code
}

Answer 4

使用jquery，您应该能够使用

获取窗口的宽度和高度

$(window).width();
$(window).height();

做你想做的事（如果你已经在使用jquery）

$(window).resize(function() {
   if ($(window).width() <= 768) {
       //do your code
   }
   else {
       //go back to normal
  }
});

如何在我的网页中以特定窗口宽度运行此代码？

4 个答案: