Включить/выключить джава скрипт в зависимости от ширины экрана (браузера)

Сегодня возникла такая необходимость — отключать джава скрипт, отвечающий за фиксирование верхнего меню на сайте, на экранах шириной менее 450 пикселов.

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

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

Решение оказалось очень простым. Хотя повстречал разные варианты, предлагаемые на форумах специалистами. Рабочим оказался именно этот, о котором и хочу рассказать.

Не вдаваясь глубоко в теории, скажу так: джава скрипт сегодня дает нам возможность контролировать размер (в данном случае нас интересует ширина) устройства или браузера, в котором просматривается сайт.

Задав условие — если ширина экрана больше определенной величины, мы загружаем скрпит; если ширина экрана меньше заданной величины, скрипт не загружается, а значит, и не работает — мы легко можем управлять джава скриптами. И не только.

И вот собственно конструкция:

<script> 
$(document).ready(function(){
    w = document.body.clientWidth;
    if (w >= '450'){			
    $(window).scroll(function(){
                /**
                 *Здесь скрипт, который мы подключаем/отключаем
                 */
     }            
});
</script>

Все. Скрипт для подключения/отключения джава скрипта (скриптов) готов. В общем-то, условия мы можем задать какие угодно, в зависимости от поставленной задачи. В данном случае проверяем ширину браузера.

Немного доработав выше описанный скрипт, можем задавать несколько условий. Например, при ширине экрана более 1000 пикселов проигрывается один сценарий (подключается один скрипт; при ширине экрана менее 1000 и более 600 пикселов — другой; менее 600 — третий.

<script> 
$(document).ready(function(){
  w = document.body.clientWidth;
  if (w >= '1000') {    
    // выполняется на экранах больше 1000рх
  } else {
    if (w >= '600') {
      // выполняется на экранах больше 600рх и менее 1000px
    } else {
      if (w < '600') {
        // выполняется на экранах меньше 600рх
      }
    }
  }
});
</script>