Добавить активный класс только в мобильном

Question

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

Я смог сделать это, добавив класс, поэтому при первом нажатии на кнопку откроется меню, а при втором щелчке он отправит ввод.

Теперь препятствием является добавление активного класса только в мобильном телефоне.Каков наилучший способ сделать это?Если он обнаружен UserAgent, это мобильные устройства с большими экранами (например, планшеты).

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

Вот соответствующая часть кода:

$(document).on('click', '.navbar-collapse form[role="search"]:not(.active) button[type="submit"]', function(event) {
  event.preventDefault();
  var $form = $(this).closest('form'),
  $input = $form.find('input');
  $form.addClass('active');
  $input.focus();
});

Answer 1

if($(window).width()<768){
    $("body").addClass("mobileview");
} 
else {
    $("body").removeClass("mobileview");
}
// this is used whenever the window is resized
$(window).resize(function(){
  if($(window).width()<768){
        $("body").addClass("mobileview");
    } 
    else {
        $("body").removeClass("mobileview");
    }
});

Answer 2

Вы можете проверить, использует ли пользователь мобильное устройство, как это:

if( navigator.userAgent.match(/Android/i)
 || navigator.userAgent.match(/webOS/i)
 || navigator.userAgent.match(/iPhone/i)
 || navigator.userAgent.match(/iPad/i)
 || navigator.userAgent.match(/iPod/i)
 || navigator.userAgent.match(/BlackBerry/i)
 ){
   $form.addClass('active');

 // some code..
}