Сегодня я верстал шаблон сайта, который должен быть адаптивным. Для адаптивности я использовал в CSS Media Queries. Чтобы не мучится, я подключил Twitter Bootstrap, в котором имеется замечательная модульная сетка. И все прекрасно верстается.
После полной верстки, появилась необходимость схлопнуть выпадающее меню в кнопку-бутерброд (или кнопка-гамбургер, кому как). И все эти махинации должен выполнять javascript. Для того, чтобы определить размер экрана, я использовал значение
Но не тут то было. На ноутбуке я обнаружил, что есть размер окна, при котором уже наступили медиазапросы большего диапазона, а меню-бутерброд не пропадает. Я излазил весь код, но бага не нашел. Тогда я открыл заново Хром и начал ресайзить окно. Бинго. Медиазапрос измеряет ширину окна с скроллбаром, а javascript без него. И что же делать?
Просмотрев ответы гугла, ничего путевого я не нашел. Но какой верстальщик не обходится без велосипедов и костылей?! Решение было найдено. Для этого я создал дополнительный блок, который имеет вот такой CSS:
Теперь, чтобы получить в javascript значение ширины окна с учетом ширины браузера я использую вот такой js:
P.S.: возможно существует боле адекватный вариант, но я его не нашел. Всем спасибо за внимание.
После полной верстки, появилась необходимость схлопнуть выпадающее меню в кнопку-бутерброд (или кнопка-гамбургер, кому как). И все эти махинации должен выполнять 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.: возможно существует боле адекватный вариант, но я его не нашел. Всем спасибо за внимание.