在 HTML5 响应式布局中动态调用 jQuery 函数

Question

我正在 Drupal 中使用响应式主题（Omega），它可以检测浏览器尺寸并根据为某些屏幕尺寸（700px+、900px+ 和 1100px+）提供的 CSS 更改页面布局。

我相信它是通过添加媒体查询和/或向 body 标记添加 css 类来实现的。

我有一个稍微不同的函数，我想调用它来响应浏览器窗口大小的变化，但它必须响应，IE 调用相关函数而不重新加载页面

可以这样做吗？

我目前有这样的东西：

$(window).resize(function(){
 var width = $("body").width();
   if(width>1100)
     { 

                        $('.accordion').gridAccordion({width:1160, height:526, columns:4, distance:2, closedPanelWidth:50, closedPanelHeight:50, alignType:'centerCenter', slideshow:true,
                        panelProperties:{

                        }});

     }


      if(width>900)
     { 

                    $('.accordion').gridAccordion({width:920, height:417, columns:4, distance:2, closedPanelWidth:50, closedPanelHeight:50, alignType:'centerCenter', slideshow:true,
                    panelProperties:{

                    }});

     }

});

这样做的问题是，在我调整窗口大小之前，它不会加载我的 div，并且它还需要刷新才能识别窗口已调整大小。

我很感激我能得到的任何帮助，提前致谢。

编辑

所以我修改了我的代码，使其看起来像这样

$(window).bind('resize load',function(){ var width = $("#zone-header").width(); if(width>1100)...

现在已经解决了 div 未立即加载的问题，但它仍然无法解决我的调整大小问题，除非我调整大小然后刷新页面。我情不自禁地觉得自己已经非常接近解决方案了，但就是不知道接下来该何去何从。

Answer 1

最初不被调用的问题可以通过最初自己调用来轻松解决：

$(window).resize(function(){
    // stuff
}).resize();  // fire the resize

就需要刷新屏幕而言，不应该是这样。我怀疑问题出在您使用的插件如果多次调用则无法正常工作，但我不熟悉该插件。