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

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

2 个答案: