Отключение файла js для мобильных устройств

Отключение javascript для мобильных устройствВсем привет, друзья. Недавно, при оптимизации одного сайта, стала задача отключить ненужные скрипты для мобильных устройств. То есть, когда человек заходит с устройства с маленьким разрешение экрана, нужно было отключить часть скриптов, так как они либо не использовались, либо мешали нормальному отображению сайта. И я решил написать заметку в блог о том, как я справился с этой задачей.

Возможно и вам пригодится подобный опыт. Еще немного предыстории. Landing page был не адаптивным и была подключена анимация по этой статье: http://goo.gl/LJa3Aw

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

(Если вы знакомы с wow.js, то знаете, что при помощи этого скрипта можно задать расстояние от нижней области экрана, до старта анимации)

Как отключить скрипт для мобильных устройств

Как видите, часть текста в схеме работы и логотипы компаний - отсутствуют. В таком случае было принято решение отключить анимацию и скрипт на устройствах с разрешением экрана меньше 480px. Для этого пришлось использовать такую конструкцию:


<script type="text/javascript">
{
if (screen.width > 480) document.write ('<script type="text/javascript" src="js/wow.min.js" ></sc' + 'ript>');
}
</script>

Где 480 - это как раз разрешение, при котором боль не показывается анимация. Надеюсь, кому-нибудь из вас тоже окажется полезный данный способ при оптимизации сайта. Будь это скорость загрузки или подстройка внешнего вида. А на сегодня - все. Вот такая заметка получилась. Спасибо, что читаетеsmartlanding.biz. Пока!

25 комментариев

  1. Михаил

    Я тоже сталкивался с таким эффектом, когда анимация не пригрывалась из-за маленького расстояния:-)

  2. Сергей

    Вы меня спасли, спасибо!

  3. Константин

    Можно допустим использовать еще другую фишку.

    if ($(window).width() > 999) {
    тогда выполняем действие
    } else {
    если нет тогда другое
    }

    но проблема в том если просто сузить браузер, оно не отработает, а только при обновлении странички

    1. freelancerblog

      Не работает, потому что не используется событие ресайза браузера. Попробуйте обвернуть ваше условие вот таким:
      $(window).resize(function(){
      // ваше условие if ...
      });

  4. Евгений

    Крайне интересная идея. Подскажите новичку в web как сделать подобное условие на php. Суть в том, чтобы силами php вообще убрать загрузку кода при маленьком разрешении.

  5. IG-M

    Мой вариант:

    {
    if(document.documentElement.clientWidth > 1200) document.write ('');
    }

  6. viktornaymayer

    прикольно, спасибо. Кстати обратный слеш помогает ставить ковычки слеши и т.д. С помощью чего можно избежать данной конструкции "''" и сделать кож красивее:

    if (screen.width > 480) document.write ('');

  7. Sfera

    не работает этот скрипт репостят кому не лень да же не проверив

  8. Sfera

    А вот так работает!

    <script>
    if(window.screen.width > 800) {
    	document.write('<script src="путь_к_скрипту.js"><\/script>');
    }
    </script>
    
    1. Евгения

      Походу, только у тебя и не работает. Вообще не твой день)

  9. Алексей

    Можете подсказать, как сделать так., чтобы для десктопных устройств на сайте отображался один код виджета, а для мобильных другой код. Нет универсального виджета, есть только десктоп и Мобайл. А десктоп выходит за границы. Спасибо!

  10. Ник

    Подскажите куда этот скрипт ставить

    1. dimadv7

      Туда, где подключаются отальные скрипты. У кого-то между тегами head, кто-то в футер подключает.

  11. Ник

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

  12. Михаил

    Спасибо!

  13. Михаэль

    не работает ведь... реально. проверял по разному, вообще никак не выходит.

    1. dimadv7

      Михаэль, да нет, работает, как проверяли? Загружали сразу мобильно разрешение или сужали окно браузера?

    2. Михаэль

      dimadv7, Привет! Задержался я с ответом) Сорян. Проблемы с инетом были и не мог получить доступ к сайту. Ну я сужал окно браузера, так как под рукой пока не было телефона и это не работает. Сегодня вечером протестирую на мобильном...) надеюсь сработает...

    3. dimadv7

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

  14. Анаастасия

    аналогичная проблема с отключением на мобильных...

    запись следующая:

    {
    if (screen.width > 768) document.write ('');
    }

    не отключается...

    перезагружала именно с мобильной версии

    1. dimadv7

      Все верно, js грузится при загрузке страницы, если вы хотите, чтобы все работало при изменении окна браузера, то нужно функцию писать, которая бы реагировала на изменение окна браузера (resize), а так, только во время загрузки страницы проверяется условие. То есть, если зайти с мобильного, то условие сработает сразу. Или, если сразу зайти под разрешение меньше указанного.

    2. Анастасия

      dimadv7,
      Не работает с мобильного или с малого разрешения. я не про ресайз, я именно про отключение скрипта при загрузке с разрешения менее 768.

      {
      if (screen.width > 768) document.write ('');
      }

    3. dimadv7

      Анастасия, есть ли ошибки в консоли? Скрипт работает, проверил только что: https://prnt.sc/qbg2it

  15. Анастасия

    Ошибок нет..
    Прилагаю скрин - может я и правда что-то не то делаю...
    http://prntscr.com/qbgcb0

    1. dimadv7

      Анастасия, насколько я понял из скрина, у вас скрипт 2 раза подключен. Достаточно просто указать то, что в условии, а тот, что выше, удалите.

Добавить комментарий

 

© 2014 — 2021, Smartlanding.biz. Все права защищены. Любое использование материалов допускается только с указанием активной ссылки на источник. Политика конфиденциальности