слушать клик по всему дому на протяжении работы всей страницы? классное решение. по-хорошему при открытии меню надо биндить клик на "не меню", а при закрытии бинд этот удалять. да и со стилями тоже не самая лучшая практика. правильнее будет всё таки контролировать это из цсски, классами типа 'active' родителя и по наличию этого класса уже играться со стилями. ах да, на счет хаотичности. '*' это все элементы. включая родителей того по кому ты кликнул. кликаются ВСЕ СРАЗУ. поэтому - если в дереве четное количество родителей - то срабатывает, если не четное - то нет.
Я использую что-то такое

$(".sidebar-toggle").on('click', function(){ // клик по кноке открытия
    var h = $("aside.sidebar") //блок который должен открываться
    if($(this).is('.active')) { // если кликнутое меню уже открыто - закрываем
      $(this).removeClass("active"); //удаляем подсвечивание открытого меню
      h.removeClass("active"); //закрываем
      $(document).unbind('.closeMobileMenu'); // удаляем бинд закрытия меню
    } else {
      $(this).addClass("active"); //подсвечиваем открытое
      h.addClass("active"); //открываем
      $(document).bind('touchend.closeMobileMenu click.closeMobileMenu', function(e) { //событие клик по документу
        if (!h.is(e.target) && $(e.target).closest(h).length === 0 && !$(".sidebar-toggle").is(e.target)) { //если это не тот блок, что показывается
          $(".sidebar-toggle").click(); //кликаем второй раз что бы закрылось (тут вообще должно быть полноценное закрытие а не второй клик)
        }
      });
    }
    return false;
  });

даже если экран имеет физическое разрешение 640пх, браузер все равно считает его за 320 и отображать его будет как 320, почитайте про retina и экраны с высокой плотностью пикселей и как они работают с вебом