CSS-медиа-запросы и ширина окна JavaScript не совпадают

Для адаптивного шаблона у меня есть медиа-запрос в моем CSS:

@media screen and (max-width: 960px) {
 body{
 /*  something */
 background:red;
 }
}

И я создал функцию jQuery при изменении размера для ширины журнала:

$(window).resize(function() {
 console.log($(window).width());
 console.log($(document).width()); /* same result */
 /* something for my js navigation */
}

И есть разница с обнаружением CSS и результатом JS, у меня есть эта мета:

<meta content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width" name="viewport"/>

Я полагаю, это связано с полосой прокрутки (15 пикселей). Как я могу сделать это лучше?

Ответ 1

Вы правы в полосе прокрутки, потому что CSS использует ширину устройства, но JS использует ширину документа.

Что вам нужно сделать, это измерить ширину видового экрана в вашем JS-коде вместо использования функции ширины jQuery.

Этот код от http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

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

Ответ 2

Я нашел следующий код на http://www.w3schools.com/js/js_window.asp:

var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

Практически он работает так же, как ответ в ответ на @Michael Bird, но его легче читать.

Изменить: Я искал метод, который дает точно такую же ширину, что и для медиа-запросов css. Извините, но предложенный не работает на Safari с прокруткой. Я закончил использование modernizr.js в одной центральной функции, а в остальной части кода я просто проверяю, является ли тип отображения мобильным, планшетом или рабочим столом. Поскольку меня не интересует ширина, это отлично работает для меня:

getDisplayType = function () {
  if (Modernizr.mq('(min-width: 768px)')){
    return 'desktop';
  }
  else if (Modernizr.mq('(min-width: 480px)')){
    return 'tablet'
  }
  return 'mobile';
};

Ответ 3

window.innerWidth - это то, что вам нужно.

if (window.innerWidth < 768) работает для точки прерывания 768 в CSS

Ответ 4

Мой опыт заключался в том, что ширина запроса на медиа-контент отслеживает document.body.clientWidth. Из-за вертикальной полосы прокрутки, идущей и идущей, проверка ширины документа, окна или видового экрана() может привести к тому, что мой Javascript запустится поздно - после изменения правила медиа-запроса в зависимости от высоты окна.

Проверка document.body.clientWidth позволяла моему коду script выполняться последовательно, в то время как правило медиа-запросов вступало в силу.

@media (min-width: 873px) {
// некоторые правила
}
...

if (document.body.clientWidth >= 873) {
//некоторый код
}

Код Энди Лангтона поставил меня на это - спасибо!

Ответ 5

Привет, я использую этот небольшой трюк, чтобы заставить JS и CSS работать вместе на быстро реагирующих страницах:

Проверьте видимость отображаемого элемента или нет в условии CSS @media size. Использование bootstrap CSS я проверяет видимость элемента класса hidden-xs

var msg = "a message for U";

/* At window load check initial size  */
if ( $('#test-xsmall').is(':hidden')  ) {
  /* This is a CSS Xsmall situation ! */
  msg = "@media CSS < 768px. JS width = " + $(window).width() + " red ! ";
  $('.redthing-on-xsmall').addClass('redthing').html(msg);

} else {
  /* > 768px according to CSS  */
  msg = "@media CSS > 767px. JS width = " + $(window).width() + " not red ! ";
  $('.redthing-on-xsmall').removeClass('redthing').html(msg);
}


/* And again when window resize  */

$(window).on('resize', function() {
  if ($('#test-xsmall').is(':hidden')) {
    msg = "@media CSS < 768px. JS width = " + $(window).width() + " red ! ";
    $('.redthing-on-xsmall').addClass('redthing').html(msg);
  } else {
    msg = "@media CSS > 767px. JS width = " + $(window).width() + " not red ! ";
    $('.redthing-on-xsmall').removeClass('redthing').html(msg);
  }
});

@media (min-width: 768px) {
  .hidden-xs {
    display: block !important;
  }
}
@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}
.redthing-on-xsmall {
  /* need a scrollbar to show window width diff between JS and css */
  min-height: 1500px;
}
.redthing {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- the CSS managed Element that is tested by JS --> 
<!-- class hidden-xs hides on xsmall screens (bootstrap) -->

<span id="test-xsmall" class="hidden-xs">THIS ELEMENT IS MANAGED BY CSS  HIDDEN on @media lower than 767px</span>


<!-- the responsive element managed by Jquery  -->
<div class="redthing-on-xsmall">THIS ELEMENT IS MANAGED BY JQUERY RED on @media max width 767px </div>

Ответ 6

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

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

Ответ 7

Ссылочный запрос Css равен window.innerWidth. Css Media Запросы также вычисляют полосу прокрутки.