javascript - 调整大小或方向更改后调用或取消调用功能

Question

我正在开发一个移动网络项目，该项目根据屏幕大小在两列或单列视图之间进行。对于某些设备尺寸，从纵向更改为横向会在单列和双列之间切换。页面底部有三个并排的特征图像，用于两列视图，但我们希望变成单列中的内容滑块。

我的问题：
当屏幕宽度低于某个宽度时，我调用的 javascript 条件函数。但是，如果您更改屏幕的方向/大小，它不会调用该功能或​​重新评估屏幕宽度。

我有的：

if( $(window).width() < 570) { 
    $(window).load(function() { 
        $('.flexslider').flexslider(); 
    }); 
}

在调整大小事件之后观察调整大小和调用/调用函数的最佳方法是什么？

Answer 1

在窗口上使用 jQuery 调整大小事件。jsfiddle

$(window).resize(function(){
 //your code

});

Answer 2

按照 Shusl 所说的，你需要在 $(window).resize(); 中创建函数。

我要做的是创建函数并确保也触发它。所以它会像 -

$(window)resize(function() {

    winWidth = $(window).width();
    winHeight = $(window).height();

    if (winWidth < 570) {

       $(window).load(function() { $('.flexslider').flexslider(); });

    }
   else {
      // do something else
   } 

   }).trigger("resize");