如何确定客户端是否为触摸设备

IT技术 javascript jquery touch tablet
2021-02-23 02:40:21

有没有什么好的和干净的方法或技巧来确定用户是否在触摸设备上?

我知道有这样的东西 var isiPad = navigator.userAgent.match(/iPad/i) != null;

但我只是想知道是否有一种技巧可以大致确定用户是否使用 Touch 设备?因为有更多的触摸设备和平板电脑,然后只有 iPad。

谢谢。

6个回答

您可以使用以下 JS 函数:

function isTouchDevice() {
   var el = document.createElement('div');
   el.setAttribute('ongesturestart', 'return;'); // or try "ontouchstart"
   return typeof el.ongesturestart === "function";
}

来源:检测基于触摸的浏览

请注意上面的代码只测试浏览器是否支持触摸,而不是设备。

相关链接:

jquery for mobilejtouch 中可能有检测

2021-04-27 02:40:21
2021-05-04 02:40:21
适用于 iPhone,但对于 Android、BlackBerries、Symbians、WebOS... 呢?
2021-05-11 02:40:21
不是有用的评论。不工作怎么办?alert(typeof el.ongesturestart)或你尝试了什么?什么设备?什么操作系统?在没有建设性信息的情况下进行投票对任何人都没有帮助。这也是一个2岁的帖子。世界从那时起
2021-05-21 02:40:21
在 iOS 7.0.6 的 iPhone 上使用 Safari 返回 false。
2021-05-21 02:40:21

包括Modernizer,这是一个很小的特征检测库。然后你可以使用类似下面的东西。

if (Modernizr.touch){
   // bind to touchstart, touchmove, etc and watch `event.streamId`
} else {
   // bind to normal click, mousemove, etc
}
特征检测 > UA 检查。
2021-05-13 02:40:21
if ("ontouchstart" in document.documentElement)
{
  alert("It's a touch screen device.");
}
else
{
 alert("Others devices");
}

我在这里和那里浏览了很多后发现的最简单的代码

我不相信这一点,因为它在我的不是触摸设备的 Mac 上显示为真。这只是询问浏览器是否支持它..我想
2021-05-13 02:40:21

使用document.createEvent("TouchEvent")不适用于桌面设备。所以你可以在 if 语句中使用它。

请注意,此方法可能会在非触摸设备上产生错误。我宁愿检查的ontouchstartdocument.documentElement

查看这篇文章,它提供了一个非常好的代码片段,用于说明在检测到触摸设备时要做什么或在调用 touchstart 事件时要做什么:

$(function(){
  if(window.Touch) {
    touch_detect.auto_detected();
  } else {
    document.ontouchstart = touch_detect.surface;
  }
}); // End loaded jQuery
var touch_detect = {
  auto_detected: function(event){
    /* add everything you want to do onLoad here (eg. activating hover controls) */
    alert('this was auto detected');
    activateTouchArea();
  },
  surface: function(event){
    /* add everything you want to do ontouchstart here (eg. drag & drop) - you can fire this in both places */
    alert('this was detected by touching');
    activateTouchArea();
  }
}; // touch_detect
function activateTouchArea(){
  /* make sure our screen doesn't scroll when we move the "touchable area" */
  var element = document.getElementById('element_id');
  element.addEventListener("touchstart", touchStart, false);
}
function touchStart(event) {
  /* modularize preventing the default behavior so we can use it again */
  event.preventDefault();
}