JS как-то не так вычисляет ширину, почему?

Question

[Алексей Верховцев]

Здравствуйте, проблема такова, есть сайт, в нём меню в блоке, после 900px даю ему display: none; и после этого при нажатии на кнопку оно показывается или скрывается соответственно с помощью JS

var isOpenMenu = false;
    function openMenu() {
        $('.wrapper-top-line-menu').fadeIn(200);
        isOpenMenu = true;
    }
    function closeMenu() {
        $('.wrapper-top-line-menu').fadeOut(200);
        isOpenMenu = false;
    }
    function deleteStyleMenu() {
        $('.wrapper-top-line-menu').removeAttr('style');
        isOpenMenu = false;
    }
    $('.icon-menu-mobile').on('click', function() {
        $('.wrapper-top-line-menu').css({'margin-top': $('.top-line').outerHeight()});
        if(!isOpenMenu) {
            changeScreen();
            openMenu();
        }
        else {
            defaultScreen();
            closeMenu();
        }
    });

Если я закрыл его, то в стилях у него style="display: none; margin-top: высота полоски меню", когда ширина браузера становится больше 900px, то соответственно я не вижу меню и имею margin, то-есть с помощью JS мне нужно сбросить это всё после 900px, делаю так

function resizeScreen() {
        if($(window).width() > 900) {
            defaultScreen();
            deleteStyleMenu();
        }
    }
    $(window).on('resize', resizeScreen);

И проблема в том, что он-то после 900 удаляет у меня атрибут "style" только если меню было открыто, то-есть, если оно показывается и я увеличиваю браузер, то после 900px всё благополучно пропадает, атрибут style у элемента исчезает, но если оно закрыто, то оно пропадает только после 918px, в чём прикол? Почему так работает, что я делаю не так? Есть какие-то предположения или может способ получше вернуть в исходное состояние меню?

Answer 1

[Денис]

Сложно что-либо предполагать, не видя код в действии. Попробуйте вместо события resize использовать matchMedia (не работает в ослах 9-ой и ниже версиях).

var mq = window.matchMedia('screen and (min-width: 900px)');
mq.addListener(foo);

function foo(mq) {
    if (mq.matches) {
        // вьюпорт больше 900px
    } else {
        // вьюпорт меньше 900px
    }
}
foo(mq);

Comments

[Алексей Верховцев]

delips.ru/DonRoll/ пожалуйста :)