Отключение файла 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. Пока!

Понравилась статья? Не хотите пропустить следующие материалы о самостоятельном создании и раскрутке landing page?

Подпиcывайтесь на обновления!

Комментарии: 6

  1. Михаил

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

  2. Сергей

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

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

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

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

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

    • freelancerblog

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

  4. Евгений

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

  5. IG-M

    Мой вариант:

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

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