Question

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

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

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

我已修改了Gallery插件（jQuery Gridder）的核心代码，因此用户可以使用左/上箭头键用于上一张图片，使用右/下箭头键用于下一张图片。我还包括了esc键以关闭整个视图。

此外，我还添加了向左（上）/向右（下一个）向左滑动jQuery

现在，我想找到一种方法，可以根据哪种设备确定要显示的提示。

我想到了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。

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

1 个答案: