JQuery检测窗口大小调整

Question

JQuery检测窗口大小调整

3

我在处理一个关于检测窗口大小改变的网站问题，想请教一下。我知道之前已经有讨论过这个问题，我也阅读了很多讨论内容，但是仍然无法使其正常工作。我才刚开始学习jquery。

 $(function(){
    var viewPortWidth = $(window).width();
    if (viewPortWidth > 1900)
    {
       $('#mainbio, #footerlinks').addClass('extraWide')
    }
    else if (viewPortWidth > 1400)
    {
       $('#mainbio, #footerlinks').addClass('wide')
    }
    else if (viewPortWidth > 1000) 
    {
       $('#mainbio, #footerlinks').addClass('standard')
    }
    else if (viewPortWidth > 700)
    {
       $('#mainbio, #footerlinks, #twitter, #facebook, #flickr,   #lastfm').addClass('narrow')
    }
    else 
    {
       $('#mainbio, #footerlinks, #twitter, #facebook, #flickr, #lastfm').addClass('extraNarrow')
    }
 });

这是目前我所拥有的并且它可以很好地运作，但仅限于初始加载。我想知道是否有人能够帮我调整它，使其能够动态工作 - 这样如果我手动调整浏览器大小，就可以看到更改，而无需刷新页面？

谢谢！

- Jgammel

2个回答

1

目前，这是一个自调用匿名函数，因此将在页面加载时立即运行（因此仅运行一次）。

要使其在窗口大小调整时运行，您需要在窗口上注册resize事件（完整文档在此http://api.jquery.com/resize/）。

如果您更新以下行：

$(function() {

以便它读取

$(window).resize(function() {

每当浏览器窗口大小调整时，它都会被调用。

- Marryat

@vietech - 确实如此。 - Marryat

@Jgammel 当你说它“breaks”时，具体指什么情况？ - Marryat

@Jgammel 如果您尝试使用Viewtech的解决方案，他在$(window).resize()函数末尾漏掉了);。 - Marryat

@Marryat 谢谢 - 现在似乎已经可以了。有一件奇怪的事，这不是什么大问题，只是出于我的好奇心。当我刷新或手动缩小浏览器大小时，它都能正常工作，但如果我尝试手动拖动/放大浏览器窗口，更改就不会被注册。你有什么想法为什么只有在缩小大小时才能工作吗？感谢你的帮助！ - Jgammel

@Marryat 啊哈。非常感谢您在这个问题上的帮助。我现在明白了。 - Jgammel

显示剩余4条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dev · Accepted Answer

你可以使用 .resize() 调用此函数。

例如：

var detectViewPort = function(){
    var viewPortWidth = $(window).width();
    if (viewPortWidth > 1900)
    //...The rest of your above code.
};

$(function(){
  detectViewPort();
});

$(window).resize(function () {
   detectViewPort();
});

可能还有其他/更好的方法解决这个问题，但我知道的选项是这个。