Я использую Twitter Bootstrap в проекте. Наряду со стилями начальной загрузки по умолчанию я также добавил несколько своих
//My styles
@media (max-width: 767px)
{
//CSS here
}
Я также использую jQuery для изменения порядка определенных элементов на странице, когда ширина области просмотра меньше 767 пикселей.
$(document).load($(window).bind("resize", checkPosition));
function checkPosition()
{
if($(window).width() < 767)
{
$("#body-container .main-content").remove().insertBefore($("#body-container .left-sidebar"));
} else {
$("#body-container .main-content").remove().insertAfter($("#body-container .left-sidebar"));
}
}
Проблема, которую я имею, состоит в том, что ширина, вычисленная с помощью $(window).width()
и ширина, рассчитанная с помощью CSS, не кажется одинаковой. Когда $(window).width()
возвращается 767, css вычисляет его ширину области просмотра как 751, так что, похоже, разница в 16px.
Кто-нибудь знает, что вызывает это и как я мог решить проблему? Люди предположили, что ширина полосы прокрутки не принимается во внимание, и использование $(window).innerWidth() < 751
- путь. Однако в идеале я хочу найти решение, которое рассчитывает ширину полосы прокрутки и которое соответствует моему медиа-запросу (например, когда оба условия проверяются по значению 767). Потому что наверняка не все браузеры будут иметь ширину полосы прокрутки 16 пикселей?
Ответы:
Если вам не нужно поддерживать IE9, вы можете просто использовать
window.matchMedia()
( документация MDN ).window.matchMedia
полностью соответствует медиа-запросам CSS, и поддержка браузера довольно хорошая: http://caniuse.com/#feat=matchmediaОБНОВИТЬ:
Если вам нужно поддерживать больше браузеров, вы можете использовать mq-метод Modernizr , он поддерживает все браузеры, которые понимают медиа-запросы в CSS.
источник
Modernizr.mq
возвращает только логическое значение, поэтому вы должны вызывать его самостоятельно вonresize
обработчике событий.window.matchMedia
- рекомендуемый способ, потому что он не вызывает перекомпоновку , в зависимости от того, как часто вы вызываете функцию, это может вызвать проблемы с производительностью. Если вы не хотите использовать Modernizr напрямую, вы можете скопировать исходный код из src / mq.js и src / injectElementWithStyles.js .Проверьте правило CSS, что медиа-запрос изменяется. Это гарантированно всегда работает.
http://www.fourfront.us/blog/jquery-window-width-and-media-queries
HTML:
Javascript:
CSS:
источник
<div id="xs-indicator" class="xs-visible">
Это может быть связано
scrollbar
, использоватьinnerWidth
вместоwidth
какТакже вы можете получить
viewport
какВыше исходного кода
источник
innerWidth()
или вы можете использовать его, как$('body').innerWidth();
См. Этот stackoverflow.com/questions/8339377/…window.innerWidth
не согласуется с медиазапросами CSS в Safari 8, если в системных настройках OSX включены полосы прокрутки.да, это связано с полосой прокрутки. Правильный источник ответа: введите описание ссылки здесь
источник
Возможно, лучше не использовать JS-видимость ширины документа, а какие-то изменения, сделанные с помощью запроса css @media. С помощью этого метода вы можете быть уверены, что функция JQuery и css изменяются одновременно.
CSS:
JQuery:
источник
Недавно я столкнулся с той же проблемой - и с Bootstrap 3.
Ни $ .width (), ни $ .innerWidth () не будут работать для вас.
Лучшее решение, которое я придумал - и специально разработанное для BS3 -
это проверка ширины
.container
элемента.Как вы, наверное, знаете, как
.container
работает элемент,это единственный элемент, который даст вам текущую ширину, установленную правилами BS CSS.
Итак, что-то вроде
источник
использование
Это решило мою проблему
источник
Вот альтернатива упомянутым ранее методам, которые полагаются на изменение чего-либо с помощью CSS и чтение этого с помощью Javascript. Этот метод не нужен
window.matchMedia
или модернизр. Это также не нуждается в дополнительном элементе HTML. Он работает с использованием псевдоэлемента HTML для «хранения» информации о точках останова:Я использовал
body
в качестве примера, вы можете использовать любой элемент HTML для этого. Вы можете добавить любую желаемую строку или число вcontent
псевдоэлемент. Не обязательно быть «мобильным» и так далее.Теперь мы можем прочитать эту информацию из Javascript следующим образом:
Таким образом, мы всегда уверены, что информация о точках останова верна, так как она поступает непосредственно из CSS, и нам не нужно возиться с получением нужной ширины экрана с помощью Javascript.
источник
querySelector()
илиgetPropertyValue()
. Вы также можете искать одинарные кавычки в регулярных выражениях (поскольку они не согласованы). Это:window.getComputedStyle(document.body, ':after').content.replace(/"|'/g, '')
. И, чтобы сделать это немного дешевле, вы можете обернуть его в подчеркивание / lodash._debounce()
с ожиданием ~ 100 мс. Наконец, добавление атрибутов в <html> делает вывод доступным для других вещей, таких как предложения отключения подсказок, ищущих необработанные флаги / данные вне переменных. Пример: gist.github.com/dhaupin/f01cd87873092f4fe2fb8d802f9514b1Javascript предоставляет более одного метода для проверки ширины области просмотра. Как вы заметили, innerWidth не включает ширину панели инструментов, и ширина панели инструментов будет отличаться в разных системах. Существует также опция externalWidth , которая будет включать ширину панели инструментов. В API Mozilla Javascript гласит:
Состояние javascript таково, что нельзя полагаться на конкретное значение externalWidth в каждом браузере на любой платформе.
outerWidth
это не очень хорошо поддерживается на более старых мобильных браузеров , хотя он пользуется поддержкой во основных настольных браузерах и большинство более новых умных телефонов браузеров.Как указал ausi,
matchMedia
это был бы отличный выбор, поскольку CSS лучше стандартизирован (matchMedia использует JS для чтения значений области просмотра, обнаруженных CSS). Но даже с принятыми стандартами все еще существуют запаздывающие браузеры, которые их игнорируют (в данном случае IE <10, что делает matchMedia не очень полезным, по крайней мере, до смерти XP).Таким образом , если вы разрабатываете только для настольных браузеров и новых мобильных браузеров, externalWidth должен дать вам то, что вы ищете, с некоторыми оговорками .
источник
Вот менее сложный трюк для решения медиазапросов. Кросс-браузерная поддержка немного ограничивает, поскольку не поддерживает мобильный IE.
См. Документацию Mozilla для более подробной информации.
источник
попробуй это
источник
Обходной путь, который всегда работает и синхронизируется с медиазапросами CSS.
Добавить div к телу
Добавить стиль и изменить его, введя в конкретный медиа-запрос
Затем в JS проверьте стиль, который вы меняете, введя в медиа-запрос
Поэтому обычно вы можете проверить любой стиль, который изменяется, введя определенный медиа-запрос.
источник
Лучшее кросс-браузерное решение - использовать Modernizr.mq
ссылка: https://modernizr.com/docs/#mq
Modernizr.mq позволяет программно проверить, соответствует ли текущее состояние окна браузера медиа-запросу.
Примечание . Браузер не поддерживает медиазапросы (например, старый IE). Mq всегда возвращает false.
источник
источник
Что я делаю ;
и вызвать переменную aWidth в любом месте впоследствии.
Вам нужно поместить getWidth () в тело документа, чтобы убедиться, что ширина полосы прокрутки отсчитывается, иначе ширина полосы прокрутки браузера вычитается из getWidth ().
источник
Реализация скользящего слайдера и отображение различного количества слайдов в блоке в зависимости от разрешения (jQuery)
источник
Попробуй это
Для получения дополнительной ссылки нажмите здесь
источник