仅在桌面版网站上加载JavaScript的最佳方式是什么？

Question

我有一个JavaScript（jQuery），我在我的WordPress网站上运行。如果屏幕宽度低于1024像素，我只想加载脚本。

原因是因为它与顶部导航菜单的功能有关。我只希望在屏幕宽度低于1024像素时加载此脚本，因为在此之下的任何内容都将具有完全不同的菜单样式/功能。

当然，我的CSS文件中有很多媒体查询以最小宽度改变设计：1024px。

我发现了几种方法来做到这一点，我只是想确定什么是最好的办法。

这是我目前的JavaScript文件的副本：

function accordion_menus(){ 

// if we are not on mobile (menu icon is hidden) show sub items and bail 
console.log('debug: start'); 
if (jQuery('#primary-navigation .menu-toggle').is(':hidden')){ 

    console.log('debug: yes, it is hidden'); 
    // show sub menus 
    $('#primary-navigation ul.nav-menu ul.sub-menu').show(); 
    return; 
} else{ 
    // hide sub menus 
    $('#primary-navigation ul.nav-menu ul.sub-menu').hide(); 
} 

// top level nav click function 
$('#primary-navigation ul.nav-menu > li > a').click(function(e){ 

// store parent li to variable 
var parent_li = $(this).parent('li'); 

// if sub menu does not exist in parent li 
if (!$('ul.sub-menu', parent_li).first().length) { 
    return; 
} 

// if sub menu is already active, bail 
if (parent_li.hasClass('sub-menu-active')){ 
     parent_li.find('ul').slideUp(100, function(parent_li){ 
}); 
      parent_li.removeClass('sub-menu-active');  

    return false; 
} 

// stop link click 
e.preventDefault(); 

// store current sub menu in variable 
var current_submenu = $('ul.sub-menu', parent_li).first(); 

// slide up non-current sub menus 
$('#primary-navigation').find('ul.sub-menu').not(current_submenu).slideUp(function(parent_li){ 

    // remove sub-menu-active class from all first level items except current parent li 
    $('#primary-navigation').find('li').not(parent_li).removeClass('sub-menu-active'); 

}); 

// slide down current sub menu 
current_submenu.slideDown(100, function(){ 
    // add sub-menu-active to current parent li 
    parent_li.addClass('sub-menu-active'); 
}); 

}); 

// second level nav click function 
jQuery('#primary-navigation ul.nav-menu ul.sub-menu > li > a').click(function(e){ 

// store parent li to variable 
var parent_li = jQuery(this).parent('li'); 

// if sub menu does not exist in parent li 
if (!jQuery('ul.sub-menu', parent_li).first().length) { 
    return; 
} 

// if sub menu is already active, bail 
if (parent_li.hasClass('sub-menu-active')){ 
       parent_li.find('ul').slideUp(100, function(){ 

    // remove sub-menu-active class from all first level items except current parent li 
});  
    parent_li.removeClass('sub-menu-active');  
    return false; 
} 

// stop link click 
e.preventDefault(); 

// store current sub menu in variable 
var current_submenu = jQuery('ul.sub-menu', parent_li).first(); 

// slide up non-current sub menus 
jQuery('#primary-navigation ul.nav-menu ul.sub-menu > li > ul.sub-menu').not(current_submenu).slideUp(function(){ 

    // remove sub-menu-active class from all second level items except current parent li 
    jQuery('#primary-navigation ul.nav-menu ul.sub-menu > li').not(parent_li).removeClass('sub-menu-active'); 

}); 

// slide down current sub menu 
current_submenu.slideDown(100, function(){ 
    // add sub-menu-active to current parent li 
    parent_li.addClass('sub-menu-active'); 
}); 

}); 

} 

// load menu accordion on doc ready 
jQuery(document).ready(function($) { 
accordion_menus(); 
}); 

// load menu accordion on window resize 
jQuery(window).resize(function(){ 
accordion_menus(); 
}); 

Answer 1

jQuery(document).ready(function(){ 
    function resizeForm(){ 
     var width = (window.innerWidth > 0) ? window.innerWidth : document.documentElement.clientWidth; 
     if(width > 1024){ 

     } else { 

     }  
    } 
    window.onresize = resizeForm; 
    resizeForm(); 
}); 

我用这个了很多。将在每个窗口重新运行JS大小。如果你不想要，只需删除window.onresize = resizeForm;。应在所有浏览器中工作，因此请检查width.innerWidth。