如何根據屏幕寬度調用函數？

Question

我有2個功能，我希望它們根據屏幕寬度被調用。

這是我曾嘗試：

var winWidth = $(window).width(); 

var sections = function() { 
    $('.image').each(function(){ 
     var $this = $(this), 
     x = $this.find('img').width() 
     $this.width(x); 
    }); 
}; 

var sectionsMobile = function() { 
    $('.image').find('img').css({ 
      'height': 'auto', 
      'width': '100%' 
     }); 
}; 

function checkSize() { 
    if (winWidth >= 800) { 
     sections(); 
    } else { 
     sectionsMobile(); 
    } 
} 
jQuery(window).on('load resize', checkSize); 

頁面加載時，它的工作原理和CSS應用。但是，在800px邊界之間調整大小不會在功能之間切換。

完整的示例在這裏：http://codepen.io/sol_b/pen/PzgdWy

任何幫助非常讚賞。

Answer 1

試試這個：

$(window).on("load resize",function(){ 

    if($(this).width() >= 800) 
     sections(); 

    else 
     sectionsMobile(); 

}); 

Answer 2

補充一點：

(window).resize(function() { 
if (winWidth >= 800) { 
     sections(); 
    } else { 
     sectionsMobile(); 
    } 
}); 

Answer 3

第一行是永久緩存：

var winWidth = $(window).width(); 

只是移動它內部checkSize()功能。