仅在移动设备中添加活动课程

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