如何让 JQuery 响应式？

Question

情况是这样的： 我需要让 JQuery 对我的应用程序做出响应，例如让 Google 地图可拖动：在 pc 上为真，在平板电脑和手机上为假，我第一次面对这个论点。 我正在做一些测试。

这就是我们所做的： 我尝试研究处理它的最佳方法，而最好的方法（即正常工作）似乎可以在这个 SO 答案中找到：

What is the best way to detect a mobile device in jQuery?

具体来说，这是代码：

 var isMobile = navigator.userAgent.match(/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/); 

 if (isMobile) {
     alert('is not pc');
   }
 else {
     alert('is a pc');
   }

这是一个简单的测试：

http://jsbin.com/IroMAQi/1/edit

建立的其他解决方案： 发现这种方法也很有趣：

Do something if screen width is less than 960 px

但很奇怪，我的平板电脑 Samsung Galaxy Tab 3 的第一个解决方案不起作用。

这是问题：

让 JQuery 响应的最好方法是检测 navigator.userAgent.match？

如果是，我如何确保在列表中包含所有可能的设备？ 例如，我知道最近刚刚发布了新的 Firefox 手机，我怎样才能包含该设备？或许有一种包含所有不同可能性的列表？

非常感谢！！ 对不起，如果这是一个愚蠢的问题，我是否知道这一点，此时只有 Stack Overflow 可以为我澄清这一点！

Answer 1

用户代理检测的问题在于必须对其进行维护以覆盖当前设备。很难知道每个可能的设备和/或浏览器的用户代理。简而言之，这是一种非常不可靠的检测移动设备的方法，而且不是面向未来的方法。

目前检测移动设备和响应式使用 javascript 的最受青睐的方法之一是通过Modernizr library。

就响应式 javascript/jQuery 而言，您应该特别关注 Modernizr.mq 功能。

还值得注意的是，hasEvent 函数对于检测触摸设备很有用。

代码示例：

// Tablet and larger (768px)
if (Modernizr.mq('(min-width: 48em)')) {
  // Code here..
}

// Laptop and up (960px)
if (Modernizr.mq('(min-width: 60em)')) {
  // Code here..
}

// Touch devices
if (Modernizr.hasEvent('gesturestart')) {
  // Code here...
}