jquery 检测窗口大小调整

Question

我对我正在开发的一个网站有一个关于检测窗口何时调整大小的问题。我知道之前已经讨论过这个问题，并且我已经阅读了许多讨论，但无法使其发挥作用。我刚刚学习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')
    }
 });

这是我到目前为止所拥有的，它工作正常，但仅限于初始负载。我想知道是否有人可以帮助我调整它，以便它可以动态工作 - 这样，如果我手动调整浏览器大小，而不刷新，我就可以看到更改？

谢谢!

Answer 1

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

例如

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

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

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

也许还有另一种/更好的方法来解决这个问题，但这是我所知道的选项。