CSS Media Queries и Фирефокса Scrollbar Ширина

Question

Можно создать дубликат:
issue with CSS media queries(scrollbar)

Таким образом, Firefox включает в себя ширину полосы прокрутки в его вычисления ширины окна, где была Webkit не делает. Это приводит к несогласованности между браузерами.

Теперь я знаю, что технически Firefox следит за спецификацией, вычисляя полосу прокрутки как часть ширины окна, но это кажется мне совершенно интуитивным. В конце концов, мобильные устройства не имеют полос прокрутки, а ширина полосы прокрутки варьируется от браузера до браузера/ОС до ОС.

Есть ли что-нибудь, что я могу сделать, чтобы Firefox не включал ширину полосы прокрутки? Возможно, часть jQuery, которая позволит моим медиа-запросам правильно срабатывать в браузерах?

Спасибо.

Answer 1

Если вы используете медиа-запросы, смещение от боковой панели не будет иметь никакого значения между браузерами.

Если вы пытаетесь использовать jQuery с медиа-запросом, вы можете столкнуться с некоторыми небольшими проблемами, поскольку ширины, возвращаемые в jQuery, являются согласованными, и тогда будет показано смещение.

Чтобы исправить это, вам просто нужно вычислить смещение боковой панели в браузерах Firefox и вычесть из любой точки, в которой вы хотите синхронизировать. т.е.

var scrollBarWidth = 0; 
if ($.browser.mozilla) 
    scrollBarWidth = window.innerWidth - jQuery("body").width(); 

Тогда позже при указании синхронизации ...

if ($(window).width() < mediaQueryWidth - scrollBarWidth) { 
    //act to do along with the media query 
} 

Надежда это было полезно