jquery检测窗口调整大小

Posted 2023-03-06

【中文标题】jquery检测窗口调整大小

【英文标题】：jquery detect window resize

【发布时间】：2013-02-10 02:01:27

【问题描述】：

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

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

谢谢！

【参考方案1】：

你可以使用.resize()回调这个函数。

例如

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

$(function()
  detectViewPort();
);

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

可能还有另一种/更好的方法，但这是我所知道的选项。

【讨论】：

@vietech - 小问题，你错过了 );在 $(window).resize 函数的末尾。

所以我做到了:) ...也错过了$(fun.....已将它们添加到答案中

您还需要 .removeClass(OLDCLASS) 每次

【参考方案2】：

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

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

如果您更新该行：

$(函数()

这样写

$(window).resize(function()

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

【讨论】：

你是对的，但他仍然需要$(function()，所以它在页面首次加载时运行。只有resize() 只会在调整窗口大小时运行该函数。

@vietech - 确实如此。这是真的。

感谢两位的回复。抱歉，我知道我可能在做一些非常愚蠢的事情；但是，我可以按照你的说法更新我的行，并在缩小页面时对其进行调整 - 但是当我尝试重新添加功能时我会破坏它，所以它仍然会在第一次加载时刷新..？

@Jgammel 当你说它打破了会发生什么？

我失去了添加的类，它不再像我刚刚按照您的建议编辑该行时那样缩放。