調整大小或調整方向後調用或取消調用功能

Question

我正在研究基於屏幕大小的兩列或單列視圖之間的移動Web項目。對於某些設備尺寸，從縱向切換到橫向可以在單列和雙列之間切換。在頁面的底部，有兩個並排的兩個特徵圖像用於兩列視圖，但我們希望變成單列中的內容滑塊。

我的問題：
JavaScript的條件我調用的功能，當屏幕的寬度低於一定的寬度。但是，如果更改屏幕的方向/大小，則不會調用該功能或​​重新評估屏幕寬度。

我有什麼：

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

什麼是看調整大小並調用/調用resize事件後功能的最好方法？

Answer 1

在窗口中使用jQuery調整大小事件。 jsfiddle

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

}); 

Answer 2

從什麼Shusl說遵循，你需要$（窗口）.resize內創建函數（）;

我會做的是創建函數，並確保觸發它。所以它會像 -

$(window)resize(function() { 

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

    if (winWidth < 570) { 

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

    } 
    else { 
     // do something else 
    } 

    }).trigger("resize");