检测设备是否有键盘，或者是触摸设备

Question

检测用户是使用带有箭头和 esc 键的键盘的设备，还是使用具有触摸功能（如滑动）的移动设备的最佳解决方案是什么？

我有一个图片库，如果箭头键位于带键盘的设备上，我想显示它们。
或者，如果他们在移动设备上，我想告诉他们向左或向右滑动。

这是我的画廊：http://kiledesign.no/?side=Foto&vis=Galleri

我已经修改了图库插件 (jQuery Gridder) 的核心代码，因此用户可以使用箭头键向左/向上查看上一张图像，使用向右/向下箭头查看下一张图像。
我还加入了 esc 键来关闭完整视图。

另外，我添加了jquery mobile swipe left (prev)/right (next)。

现在我想找到一种方法来确定根据什么设备呈现哪些提示。

我想到了css media query。喜欢min-width。
但是有屏幕很小的迷你电脑，还有平板，甚至是分辨率相当高的手机......
所以我不认为这是一个万无一失的解决方案......

有什么建议吗？

Answer 1

您可以使用navigator.userAgent 来检查代理是计算机还是移动设备，如下所示：

var isMobile = /iPhone|iPad|iPod|Android...etc/i.test(navigator.userAgent);
if (isMobile) {
  /* Set your code here */
}

也可以像这样检测设备是否有触摸屏：

function is_touch_device() {
  var prefixes = ' -webkit- -moz- -o- -ms- '.split(' ');
  var mq = function(query) {
    return window.matchMedia(query).matches;
  }

  if (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
    return true;
  }

  // include the 'heartz' as a way to have a non matching MQ to help terminate the join
  // https://git.io/vznFH
  var query = ['(', prefixes.join('touch-enabled),('), 'heartz', ')'].join('');
  return mq(query);
}

来自link的第二个代码答案副本。