根据屏幕尺寸更改功能

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);