Как отключить кусок скрипта, если ширина экрана меньше указанного?

Question

[Alexander Lashchevsky]

Здравствуйте!

Все скрипты слиты в один js файл. Однако, если ширина экрана меньше 760px (читайте - для смартфонов), некоторые фрагменты этого файла нужно не задействовать. Попытался обернуть нужный скрипт следующим образом:

$(document).ready(function(){
   if (screen.width >= 768){
         $(document).ready(function(){
            var ...
            ...
            ...
            ...
         });
   }
});

Но ничего не работает при любом размере экрана (проверял и на мобиле, и играя с размером окна браузера). Упор хочется делать, чтобы скрипт включался/не включался именно в зависимости от размеров окна браузера (актуальный на момент загрузки страницы, естественно).

Пробовал заменить screen.width на window.innerWidth но результат тот же.

Что же делать?

Answer 1

[Сергей Озеранский]

jsfiddle.net/1n1fm0Ln
Работает у вас? в каких браузерах тестируете?
Если используете jquery то можете попробовать использовать api.jquery.com/width
p.s. взял без исправлений ваш код, дабы проверить, у меня алерт появляется, условие отрабатывает.

Comments

[Alexander Lashchevsky]

У меня срабатывает при любой ширине экрана

[Сергей Озеранский]

Александр Лащевский: браузер какой?

[Alexander Lashchevsky]

Сергей Озеранский: safari

[Александр Иванов]

проблему судя по всему не решили... А как было бы полезно.

Answer 2

[Александр Иванов]

Всё таки jQery это может.
Вот рабочий пример:

function resizeScrenn(){
        if ($(window).width() <= 779){
      		$(".icn-nav").click(function(){
            $('.navigation').fadeIn();
          });
          $(".icn-close").click(function(){
            $('.navigation').fadeOut();
          });
      	} else{
          $('.navigation').fadeIn();
      	}	
      }
      resizeScrenn();
      $(window).resize(function(){
      	resizeScrenn();
      });

Answer 3

[bromzh]

Modernizr умеет media queries:
Modernizr.mq('only all and (min-width: 900px)')

Comments

[Сергей Озеранский]

ради этого подключать библиотеку не лучшее решение.
А зачем два раза $(document).ready ?

[bromzh]

Сергей Озеранский: модернизр можно кастомизировать, т.е. возможно включить в итоговый js только нужный функционал, так что кода там будет по минимуму.. Да и сам модернизр довольно полезная вещь.
Хотя я сам за чистоту кода и не люблю подключать тот же jquery там, где он не нужен. А то очень многие используют от силы 5% его возможностей и тащат в любое место. А потом сайты тормозят.

[Alexander Lashchevsky]

Сергей Озеранский: я просто ни о чём не заботясь обернул всё что было в эти теги, не тратя время на правку и адаптацию кода