Javascript 仅在mobile中添加活动类

我创建了一个响应搜索按钮，一旦用户点击它，它就会打开一个表单，但在移动设备中，表单应该显示出来，而不需要用户点击任何按钮

我可以通过添加一个类来实现这一点，所以第一次单击按钮菜单打开，第二次单击它将提交输入

现在的障碍是在mobile中添加活动类。最好的方法是什么？如果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();
});

---

您可以检查用户是否正在使用以下移动设备：

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..
}

---

if（$（window）.width（）可能是@HudsonPH的重复项我编辑了我的问题，以更具体地描述我需要的解决方案。我编辑了我的问题。有一些带有这些UserAgent的移动设备的屏幕更大，因此我正在寻找一个同样基于设备屏幕大小的解决方案。
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");
    }
});