根據屏幕尺寸更改功能

Question

我試圖根據用戶屏幕尺寸執行功能。我設法用下面的代碼可以這樣做：

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

    if (width > 1000) { 
     slideshow(); 
     tablet(); 
     if (width > 1600) { 
      audio(); 
     } 
    } 
    else { 
     phone(); 
     $('.menu').localScroll(); 
    } 

當用戶正在改變他的屏幕尺寸，同時他已經是網站內部（如調整或改變方向模式）的執行仍然生效，以前的功能，這與他試圖執行的最新功能產生衝突。

我嘗試以下的代碼添加到所述一個以上列出：

$(window).resize(function() { 
    $('.logo').unbind(); 
    $('.menu-item').unbind(); 
    $('.menuList').unbind(); 
    $('.icon-menu').unbind(); 
    $('.menuListItem').unbind(); 
    $('.menu').unbind(); 
    $('.info').unbind(); 

    if (width > 1000) { 
     slideshow(); 
     tablet(); 
     if (width > 1600) { 
      audio(); 
     } 
    } 
    else { 
     phone(); 
     $('.menu').localScroll(); 
    } 
}); 

此代碼.unbind（）每一個是由前面的函數，當用戶調整瀏覽器被實現元件，但它仍然加載以前的功能（手機/平板電腦）。

我正在尋找一種方法來在調整屏幕大小時刪除不必要的功能。

活生生的例子可以在this website

Answer 1

查看試試這個：

function res(){ 
     var width = $(window).width(); 
     $('.logo').unbind(); 
     $('.menu-item').unbind(); 
     $('.menuList').unbind(); 
     $('.icon-menu').unbind(); 
     $('.menuListItem').unbind(); 
     $('.menu').unbind(); 
     $('.info').unbind(); 
    } 
$(window).ready(res).resize(res);