Best way to have a javascript load only on desktop version of site?

Question

I have a javascript (jQuery) that I am running on my WordPress site. I only want the script to load if the screen width is under 1024 pixels.

The reason for this is because it has to do with how the top navigation menu functions. I only want this script to load when the screen width is under 1024 pixels, because anything under that is going to have a completely different menu style / functionality.

Naturally I have plenty of media queries in my CSS file that change the design at min-width: 1024px.

I've found several ways to do this, I'm just trying to determine what the best way to do it would be.

Here is a copy of my current javascript file:

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

I've used this alot. Will rerun JS on each window resize. If you don't want that, just remove window.onresize = resizeForm;. Should work in all browsers hence the width.innerWidth check.