Баг, который ломает адаптивность сайта

Сегодня я верстал шаблон сайта, который должен быть адаптивным. Для адаптивности я использовал в CSS Media Queries. Чтобы не мучится, я подключил Twitter Bootstrap, в котором имеется замечательная модульная сетка. И все прекрасно верстается.

После полной верстки, появилась необходимость схлопнуть выпадающее меню в кнопку-бутерброд (или кнопка-гамбургер, кому как). И все эти махинации должен выполнять javascript. Для того, чтобы определить размер экрана, я использовал значение document.documentElement.clientWidth. Руками вынул из хрома граничные значения медиазапросов и подставил их в сравнение с полученным значением из javascript. Ура, все заработало. Теперь на моем мобильнике меню-бутерброд.

Но не тут то было. На ноутбуке я обнаружил, что есть размер окна, при котором уже наступили медиазапросы большего диапазона, а меню-бутерброд не пропадает. Я излазил весь код, но бага не нашел. Тогда я открыл заново Хром и начал ресайзить окно. Бинго. Медиазапрос измеряет ширину окна с скроллбаром, а javascript без него. И что же делать?



Просмотрев ответы гугла, ничего путевого я не нашел. Но какой верстальщик не обходится без велосипедов и костылей?! Решение было найдено. Для этого я создал дополнительный блок, который имеет вот такой CSS:

#scrollbar-width {
    width: calc(100vw - 100%);
    height: 0;
}

Теперь, чтобы получить в javascript значение ширины окна с учетом ширины браузера я использую вот такой js:

var width = document.getElementById("scrollbar-width").clientWidth + document.documentElement.clientWidth;

P.S.: возможно существует боле адекватный вариант, но я его не нашел. Всем спасибо за внимание.