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

Posted 2023-03-17

【中文标题】检测设备是不是有键盘，或者是触摸设备

【英文标题】：Detect if the device has a keyboard, or is a touch device检测设备是否有键盘，或者是触摸设备

【发布时间】：2019-04-30 10:14:39

【问题描述】：

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

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

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

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

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

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

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

有什么建议吗？

【参考方案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的第二个代码答案副本。