Изменить меню на сенсорный экран на основе изменения размера браузера

Question

У меня есть раскрывающееся меню, которое работает следующим образом:

Традиционное раскрывающееся меню при наведении мыши.

Выпадающее меню (стиль аккордеона) активируется при нажатии на сенсорных устройствах.

Это работает отлично, за исключением случаев, когда пользователь просматривает на ноутбуке / настольном компьютере с измененным размером браузераДизайн меняется на представление стиля сенсорного экрана, но событие наведения мыши делает меню практически непригодным для использования.Код JS ниже.

var cbpHorizontalMenu = (function() {
    var b = $("#cbp-hrmenu > ul > li"),
        g = b.children("a"),
        c = $("body"),
        d = -1;

    function f() {
        g.on("mouseover", a);
        b.on("mouseover", function(h) {
            h.stopPropagation()
        })
    }

    function a(j) {
        if (d !== -1) {
            b.eq(d).removeClass("cbp-hropen")
        }
        var i = $(j.currentTarget).parent("li"),
            h = i.index();
        if (d === h) {
            i.removeClass("cbp-hropen");
            d = -1
        } else {
            i.addClass("cbp-hropen");
            d = h;
            c.off("click").on("mouseover", e)
        }
        return false
    }

Есть ли способ, с помощью которого размер окна может определить, следует ли активировать меню при нажатии кнопки, например, 1024px?