0

我有这个代码：

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

        });
</script>

我希望它仅在窗口宽度小于或等于 768px 时运行/打开。我将如何使用 javascript 执行此操作？

谢谢

4

4 回答 4

1

使用window.onresize事件。

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

            });
        }

    }

请注意，这只会在调整窗口大小完成时触发，并且您可能希望使用 jQuery$(window).width()而不是纯 javascript ，因为它可能有点不稳定。另外，如果你想撤销你在上面的 if 语句中所做的事情，你需要附加一个else带有适当代码的块。最后，如果优化符合您的要求，并且您希望避免运行不必要的代码（例如，如果窗口大小调整为 768 和随后的 700，则没有理由两次运行该块），您可能需要设置一个由andif检查的标志 块（你的块会变成一个）以防止在不需要时创建一个新的。ifelse ifelseelse ifSnap

于 2013-07-01T16:56:35.957 回答
0

考虑使用modernizr 的媒体查询功能来确定是否要运行此代码。

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

if(Modernizr.mq('(max-width: 767px)'){
    //your code
}
于 2013-07-01T16:53:31.640 回答
0

使用jquery，您应该能够获得窗口的宽度和高度

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

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

$(window).resize(function() {
   if ($(window).width() <= 768) {
       //do your code
   }
   else {
       //go back to normal
  }
});
于 2013-07-01T16:53:40.103 回答
0

使用该window.innerWidth属性来确定视口的宽度。请注意，这确实包括垂直滚动条。

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

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

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

于 2013-07-01T16:52:11.470 回答