画面の幅に応じて関数を呼び出すにはどうすればよいですか？

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()関数の中に移動します。