it-swarm.com.ru

$ (window) .width () не то же самое, что медиа-запрос

Я использую 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 пикселей?

170
Pattle

Если вам не нужна поддержка IE9, вы можете просто использовать window.matchMedia() ( документация MDN ).

function checkPosition() {
    if (window.matchMedia('(max-width: 767px)').matches) {
        //...
    } else {
        //...
    }
}

window.matchMedia полностью соответствует медиазапросам CSS, и поддержка браузера довольно хорошая: http://caniuse.com/#feat=matchmedia

Обновление:

Если вам нужно поддерживать больше браузеров, вы можете использовать метод mq Modernizr , он поддерживает все браузеры, которые понимают медиазапросы в CSS.

if (Modernizr.mq('(max-width: 767px)')) {
    //...
} else {
    //...
}
269
ausi

Проверьте правило 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;
    }
}
162
NateS

Это может быть связано с 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' ] };
}

Выше кода Источник 

32
Rohan Kumar

да, это связано с полосой прокрутки. Правильный источник ответа: введите описание ссылки здесь

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' ] };
}
9
Rantiev

Возможно, лучше не использовать 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");
    ...
});
5
gramgram

Использование 

window.innerWidth

Это решило мою проблему

4
user4451021

Недавно я столкнулся с той же проблемой - и с Bootstrap 3.

Ни $ .width (), ни $ .innerWidth () не будут работать для вас.

Лучшее решение, которое я придумал - и специально разработанное для BS3 - 
is to проверить ширину элемента .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");
3
user3041539

Вот альтернатива упомянутым ранее методам, которые основаны на изменении чего-либо с помощью 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.

3
dschenk

Javascript предоставляет более одного метода для проверки ширины области просмотра. Как вы заметили, innerWidth не включает ширину панели инструментов, и ширина панели инструментов будет отличаться в разных системах. Существует также опция outerWidth, которая будет включать ширину панели инструментов. Mozilla Javascript API заявляет:

Window.outerWidth получает ширину внешней части окна браузера . Он представляет ширину всего окна браузера, включая боковую панель (если развернуто), окно Chrome и окно изменения размеров границ/маркеров.

Состояние javascript таково, что нельзя полагаться на конкретное значение externalWidth в каждом браузере на любой платформе.

outerWidth является плохо поддерживается в более старых мобильных браузерах , хотя она поддерживается во всех основных браузерах настольных компьютеров и в большинстве новых браузеров для смартфонов.

Как указывал ausi, matchMedia был бы отличным выбором, так как CSS лучше стандартизирован (matchMedia использует JS для чтения значений области просмотра, обнаруженных CSS). Но даже с принятыми стандартами все еще существуют запаздывающие браузеры, которые их игнорируют (IE <10 в этом случае, что делает matchMedia не очень полезным, по крайней мере, до XP смерти).

В summary, если вы разрабатываете только для настольных браузеров и более новых мобильных браузеров, externalWidth должен дать вам то, что вы ищете, с некоторые предостережения .

2
fzzylogic

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

     if (window.matchMedia('(max-width: 694px)').matches)
    {
        //do desired changes
    }

Смотрите документация Mozilla для более подробной информации.

1
user2128205

Обходной путь, который всегда работает и синхронизируется с медиазапросами 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)');
}

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

0
Arsen Pyuskyulyan

Лучшее кросс-браузерное решение - использовать 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
}

Note Браузер не поддерживает медиазапросы (например, старый IE), mq всегда возвращает false.

0
Sanjib Debnath
if(window.matchMedia('(max-width: 768px)').matches)
    {
        $(".article-item").text(function(i, text) {

            if (text.length >= 150) {
                text = text.substring(0, 250);
                var lastIndex = text.lastIndexOf(" ");     
                text = text.substring(0, lastIndex) + '...'; 
            }

            $(this).text(text);

        });

    }
0
Adam Colton