Выполнение скрипта в зависимости от разрешения экрана

Рейтинг: 1Ответов: 2Опубликовано: 30.04.2015

Имеется скрипт, нужно чтоб он начал выполняться при разрешении экрана >1200px а на маленьких мониторах не работал. Как это реализовать?

  <script type="text/javascript">
      $(function() {
          var topPos = $('.floating').offset().top;
          $(window).scroll(function() {
              var top = $(document).scrollTop(),
                  pip = $('#send-letter').offset().top, //расстояние до подвала от  верха окна браузера
                  height = $('.floating').outerHeight(); //получаем значение высоты   пл.блока
              if (top > topPos && top < pip - height) {
                  $('.floating').addClass('fixed').fadeIn();
              } //блок будет виден, если    значения соответствуют указанным
              else if (top > pip - height) {
                  $('.floating').fadeOut(200);
              } //блок    скроется когда достигнет заданного расстояния
              else {
                  $('.floating').removeClass('fixed');
              }
          });
      });
  </script>
javascript
Источник: Stack Overflow на русском

Ответы

▲ 2

Ширина браузера вычисленная javascript и media-queries — разная.
Лучше опираться на ту, что вычисляется с помощью media-queries.

Чтобы передать вычисленное значение в javascript, необходимо использовать элемент, который всегда будет на странице и который никак не влияет на ее отображение. Например, head.

Итак, сначала задаем значение в .css файле: 

@media screen and (max-width: 1200px) {
    head {
        min-width: 320px; /* Какое-то начальное значение */
    }
}
@media screen and (min-width: 1201px) {
    head {
        min-width: 1201px; /* Какое-то начальное значение */
    }
}

А потом оперируем им в javascript: 

$('document').ready(function() {

    // Начальное состояние
    my_func();

    $(window).resize(function() {
        /**
         * При изменении ширины окна
         */
        my_func();
    });

    window.onorientationchange = function() {
        /**
         * При смене ориентации с портретной на пейзажную или обратно
         */
        my_func();
    };

    function my_func() {
        /**
         * Считываем значение из CSS
         */
        var browserMinWidth = parseInt($('head').css('min-width'), 10);

        if (browserMinWidth > 1200) {
            // какие-то манипуляции
        }
    }
});
▲ 1

Можно использовать вот такую конструкцию, только учитывайте такой момент, что скрипт будет срабатывать при каждом ресайзе окна браузера шириной больше 1200:

$(window).resize(function() {
  if(document.documentElement.clientWidth > 1200) {
    // тут ваш скрипт
  }
});

Если вам не нужно учитывать возможность ресайза, то функция $(window).resize(function(){}); не нужна.