Я использую 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).
function checkPosition() {
if (window.matchMedia('(max-width: 767px)').matches) {
//...
} else {
//...
}
}
window.matchMedia
полностью согласуется с запросами на мультимедиа CSS, и поддержка браузера неплоха: http://caniuse.com/#feat=matchmedia
Если вам нужно поддерживать большее количество браузеров, вы можете использовать метод mpnovizr mq, он поддерживает все браузеры, которые понимают медиа-запросы в CSS.
if (Modernizr.mq('(max-width: 767px)')) {
//...
} else {
//...
}
Проверьте правило CSS, которое изменит медиа-запрос. Это гарантировано всегда.
http://www.fourfront.us/blog/jquery-window-width-and-media-queries
HTML:
<body>
...
<div id="mobile-indicator"></div>
</body>
JavaScript:
function isMobileWidth() {
return $('#mobile-indicator').is(':visible');
}
CSS
#mobile-indicator {
display: none;
}
@media (max-width: 767px) {
#mobile-indicator {
display: block;
}
}
Возможно, из-за scrollbar
используйте innerWidth
вместо width
, например
if($(window).innerWidth() <= 751) {
$("#body-container .main-content").remove()
.insertBefore($("#body-container .left-sidebar"));
} else {
$("#body-container .main-content").remove()
.insertAfter($("#body-container .left-sidebar"));
}
Также вы можете получить viewport
как
function viewport() {
var e = window, a = 'inner';
if (!('innerWidth' in window )) {
a = 'client';
e = document.documentElement || document.body;
}
return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}
Над кодом Источник
innerWidth()
или вы можете использовать его как $('body').innerWidth();
Посмотреть этот stackoverflow.com/questions/8339377/…
да, это из-за полосы прокрутки. Правильный источник ответа: введите ссылку здесь
function viewport() {
var e = window, a = 'inner';
if (!('innerWidth' in window )) {
a = 'client';
e = document.documentElement || document.body;
}
return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}
Возможно, лучше не использовать JS-область ширины документа, а какое-то изменение, сделанное запросом css @media. С помощью этого метода вы можете быть уверены, что функция JQuery и изменение css происходят одновременно.
CSS
#isthin {
display: inline-block;
content: '';
width: 1px;
height: 1px;
overflow: hidden;
}
@media only screen and (max-width: 990px) {
#isthin {
display: none;
}
}
JQuery
$(window).ready(function(){
isntMobile = $('#isthin').is(":visible");
...
});
$(window).resize(function(){
isntMobile = $('#isthin').is(":visible");
...
});
Используйте
window.innerWidth
Это решило мою проблему
Вот альтернатива описанным выше методам, которые полагаются на изменение чего-либо с помощью CSS и чтение его с помощью Javascript. Для этого метода не требуется window.matchMedia
или Modernizr. Он также не нуждается в дополнительном элементе HTML. Он работает с использованием псевдоэлемента HTML для хранения информации о контрольной точке:
body:after {
visibility: hidden;
height: 0;
font-size: 0;
}
@media (min-width: 20em) {
body:after {
content: "mobile";
}
}
@media (min-width: 48em) {
body:after {
content: "tablet";
}
}
@media (min-width: 64em) {
body:after {
content: "desktop";
}
}
В качестве примера я использовал body
, для этого вы можете использовать любой элемент HTML. Вы можете добавить любую строку или номер, который вы хотите, в content
псевдоэлемента. Не обязательно быть "мобильным" и т.д.
Теперь мы можем прочитать эту информацию из Javascript следующим образом:
var breakpoint = window.getComputedStyle(document.querySelector('body'), ':after').getPropertyValue('content').replace(/"/g,'');
if (breakpoint === 'mobile') {
doSomething();
}
Таким образом, мы всегда уверены, что информация точки останова верна, поскольку она поступает непосредственно из CSS, и нам не нужно хлопотать с получением правильной ширины экрана с помощью Javascript.
querySelector()
или getPropertyValue()
. Вы также можете искать одинарные кавычки в регулярных выражениях (поскольку они не согласованы). Это: window.getComputedStyle(document.body, ':after').content.replace(/"|'/g, '')
. И, чтобы сделать это немного дешевле, вы можете заключить его в подчеркивание / lodash ._debounce()
с ожиданием ~ 100 мс. Наконец, добавление атрибутов к <html> делает вывод доступным для других вещей, таких как предложения отключения подсказок, ищущих необработанные флаги / данные вне переменных. Пример: gist.github.com/dhaupin/f01cd87873092f4fe2fb8d802f9514b1
В последнее время я столкнулся с той же проблемой - также с Bootstrap 3.
Ни $.width(), ни $.innerWidth() не будут работать для вас.
Лучшее решение, с которым я столкнулся - и специально разработан для BS3 -
проверить ширину элемента .container
.
Как вы, вероятно, знаете, как работает элемент .container
,
это единственный элемент, который даст вам текущую ширину, заданную правилами BS css.
Итак, это похоже на
bsContainerWidth = $("body").find('.container').width()
if (bsContainerWidth <= 768)
console.log("mobile");
else if (bsContainerWidth <= 950)
console.log("small");
else if (bsContainerWidth <= 1170)
console.log("medium");
else
console.log("large");
Здесь менее привлекательный трюк для решения медиа-запросов. Поддержка кросс-браузера немного ограничена, поскольку она не поддерживает мобильный IE.
if (window.matchMedia('(max-width: 694px)').matches)
{
//do desired changes
}
Подробнее см. документацию Mozilla.
Javascript предоставляет несколько методов проверки ширины окна просмотра. Как вы заметили, innerWidth не включает ширину панели инструментов, а ширина панели инструментов будет различаться по всем системам. Существует также опция outerWidth, которая будет включать ширину панели инструментов. API Javascript Mozilla:
Window.outerWidth получает ширину внешней части окна браузера. Он представляет собой ширину всего окна браузера, включая боковую панель (если расширен), окно хром и окно изменения размеров границ/ручек.
Состояние javascript таково, что нельзя полагаться на конкретное значение для outerWidth в каждом браузере на каждой платформе.
outerWidth
не поддерживается в старых мобильных браузерах, хотя он пользуется поддержкой в основных настольных браузерах и самые новые браузеры смартфонов.
Как отметил ausi, matchMedia
будет отличным выбором, поскольку CSS лучше стандартизован (matchMedia использует JS для чтения значений в режиме просмотра, обнаруженных CSS). Но даже с принятыми стандартами все еще существуют запаздывающие браузеры, которые игнорируют их (IE < 10 в этом случае, что делает matchMedia не очень полезным, по крайней мере, до тех пор, пока не умрет XP).
В резюме, если вы только разрабатываете браузеры для настольных компьютеров и новые мобильные браузеры, внешняя ширина должна предоставить вам то, что вы ищете, некоторые оговорки.
Лучшее кросс-браузерное решение - использовать Modernizr.mq
ссылка: https://modernizr.com/docs/#mq
Modernizr.mq позволяет вам программно проверить, соответствует ли текущее состояние окна браузера медиа-запросу.
var query = Modernizr.mq('(min-width: 900px)');
if (query) {
// the browser window is larger than 900px
}
Примечание Браузер не поддерживает мультимедийные запросы (например, старый IE). mq всегда возвращает false.
Обходной путь, который всегда работает и синхронизируется с запросами мультимедиа CSS.
Добавить div в тело
<body>
...
<div class='check-media'></div>
...
</body>
Добавьте стиль и измените их, введя конкретный мультимедийный запрос
.check-media{
display:none;
width:0;
}
@media screen and (max-width: 768px) {
.check-media{
width:768px;
}
...
}
Затем в стиле проверки JS, который вы меняете, введя запрос на медиа
if($('.check-media').width() == 768){
console.log('You are in (max-width: 768px)');
}else{
console.log('You are out of (max-width: 768px)');
}
Как правило, вы можете проверить любой стиль, который изменяется, введя конкретный мультимедийный запрос.
Внедрение slick slider и отображение различных номеров слайдов в блоке в зависимости от разрешения (jQuery)
if(window.matchMedia('(max-width: 768px)').matches) {
$('.view-id-hot_products .view-content').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3,
dots: true,
});
}
if(window.matchMedia('(max-width: 1024px)').matches) {
$('.view-id-hot_products .view-content').slick({
infinite: true,
slidesToShow: 4,
slidesToScroll: 4,
dots: true,
});
}
Попробуйте это
if (document.documentElement.clientWidth < 767) {
// scripts
}
Для получения дополнительной справки нажмите здесь