CSS и jQuery имеют разную ширину

Я создаю мобильную сторону веб-сайта в настоящий момент, и мне нужен пользовательский CSS и Javascript для мобильных устройств, поэтому в CSS у меня есть правила с использованием @media screen and (max-width: 500px) { и в Javascript я шел для использования if ($(window).width() < 500.CSS и jQuery имеют разную ширину

Однако, если изменить размер моего браузера к точному пикселю мобильного CSS начинает используется, и я console.log($(window).width()); я получаю 485.

Это нормальное поведение, или я делаю что-то не так?

Update:

С помощью этого значения, как представляется, в синхронизации, тестирование только в Firefox, хотя на данный момент.

var scrollBarWidth = false; 


function mobileRules() { 

    if (!scrollBarWidth) { 
     var widthWithScrollBars = $(window).width(); 
     $('body').css('overflow', 'hidden'); 
     var widthNoScrollBars = $(window).width(); 
     $('body').css('overflow', 'scroll'); 
     scrollBarWidth = widthNoScrollBars - widthWithScrollBars; 
     console.log('Width: '+widthWithScrollBars+'. Without: '+widthNoScrollBars+'. Scroll: '+scrollBarWidth); 
    } 

    console.log($(window).width()+scrollBarWidth+' vs '+globals.mobile_width); 

    if ($(window).width()+scrollBarWidth < globals.mobile_width) { 
     console.log('Running mobile rules in jQuery'); 
    } 
}

источник

2013-11-08 Tom Hart

Не уверен, но $ (window) .width() может быть исключающей ширину вертикальной полосы прокрутки. – HaukurHaf

От небольшого отладки в javascript кажется, что правила CSS действуют на 485px, поэтому я считаю, что проблема заключается в том, что одна из них включает в себя полосу прокрутки, а другую - нет, просто не уверен, какой из них отсутствует, а какой нет. момент, я считаю, что это может быть только Javascript, но не положительный. –

Согласно [this] (http://www.456bereastreet.com/archive/201301/media_query_width_and_vertical_scrollbars/), вы также можете получить другое поведение для мультимедийных запросов в браузерах, некоторые из них включают ширину полосы прокрутки, а другие нет. – Stijn

В firefox медиа-запросы учитывают ширину полосы прокрутки, которая находится внутри ширины экрана.

Это то, что дает вам ширину экрана шириной 15 пикселей.

В браузерах, основанных на webkit, нет.

Если вы заинтересованы в том, почему эта вещь произойдет, я буду цитировать этот комментарий о this article :

проблема с Webkit браузеров (которые не являются спецификации) является то, что браузер может столкнуться с бесконечным вызванное медиа-запросами, что приводит к сбою браузера.

Например:> 500px overflow-y: scroll, < 500px overflow-y: скрыто. Измените свой браузер на ширину окна 505 пикселей. Поскольку полоса прокрутки вычитает около 15 пикселей из ширины, используемой медиа-запросом, медиа-запрос переводит вас на < 500, но как только вы нажмете < 500, полоса прокрутки исчезнет, а медиа-запрос перевернет вас на> 500, и тогда начинается забава, потому что теперь у вас есть полоса прокрутки снова, и вы - < 500 пикселей, и вы получаете этот стиль без полосы прокрутки ... Промойте и повторите, пока браузер, наконец, не умрет.

Теперь напишите javascript, чтобы рассчитать максимальную ширину медиа-запроса, и у вас есть страница, которая приведет к сбою Chrome/Safari сразу после его загрузки.

Я предполагаю, что спецификация была написана так, как это было для предотвращения этого состояния. Firefox & Opera следующая спецификация, это не их вина, вы не согласны со спецификацией.

источник

2013-11-08 09:34:39

После некоторых тестов я заметил, что Safari предоставляет различную ширину для Firefox (только браузеры на моем текущем компьютере). Хорошо знать, что это не моя реализация, и именно так работает браузер. –

CSS и jQuery имеют разную ширину

ответ

Смежные вопросы