Как учитывать вертикальную полосу прокрутки в медиазапросах?

Question

[Максим]

Необходимо сделать фиксированную адаптивную верстку. Брейкпоинты выбраны так, 768px, 1440px. При постепенном сжатии окна браузера при приближении к брейкпоинту появляется горизонтальная полоса прокрутки. Насколько я понял, это происходит из-за того, что полоса толкает контент, сжимает его, но точка перехода не учитывает эту полосу и край браузера еще не достигает размеров, меньших точки перехода.
Как правильно учитывать вертикальную полосу прокрутки?
Проблема исчезает, если переход делать немного ранее, например на 790px. Поскольку ширина вертикальной полосы прокрутки примерно 15px.

Comments

[Шохрух Шаймардонов]

Киньте ссылку на сайт или залейте код в песочницу

[Ankhena]

Что-то у вас странное происходит.
Вот простецкий пример с фиксированной шириной между брейкпоинтами: https://jsfiddle.net/1sanLtdu/

Answer 1

[tyzberd]

вы на моб попробуйте, или в эмуляторе хрома. Там полоса прокрутки не влияет на ширину. А уменьшением окна никто не проверяет адаптив

Comments

[Максим]

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

[tyzberd]

Максим, это может быть, например на старом мониторе у которого разрешение совпадает с планшетом.
Почти не сталкивался с такими проблемами, обычно верстка немного резиновая и появление полосы прокрутки не влияет.
А учитывать полосу без js костылей нормально не получится.

[tyzberd]

Последние 2 верстки вообще делаю с определение на бэкенде моб устройства. И если пк оставляю фиксированную верстку, если моб подгружаю еще моб стили.
У того же booking сделано что то подобное, только адаптивная она до 991 на пк, а если зайти с моб устройства, там уже они его определяют и выводят немного другой код.