Отключение файла 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. Дмитрий Давыдов

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

  4. Дмитрий Давыдов

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

  5. Дмитрий Давыдов

    Мой вариант:

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

  6. Дмитрий Давыдов

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

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

  7. Дмитрий Давыдов

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

  8. Дмитрий Давыдов

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

    <script>
    if(window.screen.width > 800) {
    	document.write('<script src="путь_к_скрипту.js"><\/script>');
    }
    </script>
    
    1. Дмитрий Давыдов

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

  9. Дмитрий Давыдов

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

  10. Дмитрий Давыдов

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

    1. Дмитрий Давыдов

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

  11. Дмитрий Давыдов

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

  12. Дмитрий Давыдов

    Спасибо!

  13. Дмитрий Давыдов

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

    1. Дмитрий Давыдов

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

    2. Дмитрий Давыдов

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

    3. Дмитрий Давыдов

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

  14. Дмитрий Давыдов

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

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

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

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

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

    1. Дмитрий Давыдов

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

    2. Дмитрий Давыдов

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

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

    3. Дмитрий Давыдов

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

  15. Дмитрий Давыдов

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

    1. Дмитрий Давыдов

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

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

 

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