Smartlanding

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

Поделитесь статьей в социальных сетях, чтобы не потерять

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

  • Михаил

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

    Ответить
  • Сергей

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

    Ответить
  • Константин

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

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

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

    Ответить
  • freelancerblog

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

    Ответить
  • Евгений

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

    Ответить
  • IG-M

    Мой вариант:

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

    Ответить
  • viktornaymayer

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

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

    Ответить
  • Sfera

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

    Ответить
  • Sfera

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

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

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

    Ответить
  • Алексей

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

    Ответить
  • Ник

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

    Ответить
  • dimadv7

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

    Ответить
  • Ник

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

    Ответить

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