Блог

Главная - Вопросы по программированию - Как я могу активировать свой скрипт только на мобильных устройствах?

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

#jquery #responsive

#jquery #отзывчивый

Вопрос:

У меня есть поиск, который я хочу перейти к началу при фокусировке, но только для мобильных пользователей.

Как я могу установить ширину самостоятельно?

Пока это мой код:

 $('input, textarea').focus(function () {
    $('html, body').animate({ scrollTop: ($('input, textarea').offset().top - 10) }, 1);
    return false;
});

Ответ №1:

Вы можете использовать метод matchMedia:

https://caniuse.com/matchmedia

https://www.w3schools.com/jsref/met_win_matchmedia.asp

 $('input, textarea').focus(function() {
  if (window.matchMedia("(max-width: 700px)").matches) {
    $('html, body').animate({
      scrollTop: ($('input, textarea').offset().top - 10)
    }, 800);
  }
});

https://jsfiddle.net/ju6k3grm/2/

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

1. @Albeld, не могли бы вы уточнить, что не работает? Обнаружение мобильных устройств или прокрутка до верхнего кода, который вы предоставили?

2. @Albeld вот рабочая скрипка: jsfiddle.net/ju6k3grm/2 Я переместил проверку размера в функцию фокусировки, чтобы она также работала, если пользователь изменит размер своего браузера до меньшего размера.

Ответ №2:

Вы могли бы использовать :

 let isMobile = false;

if ( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    isMobile = true;
}

$('input, textarea').focus(function () {
    if (isMobile) {
        $('html, body').animate({ scrollTop: ($('input, textarea').offset().top - 10) }, 1);
        return false;
    }
});
Метки: