Javascript 如何判断客户端是否为触控设备
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6262584/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to determine if the client is a touch device
提问by matt
is there any nice and clean method or trick to find out if the user is on a touch-device or not?
有没有什么好的和干净的方法或技巧来确定用户是否在触摸设备上？
I know there is stuff like
var isiPad = navigator.userAgent.match(/iPad/i) != null;
我知道有这样的东西
var isiPad = navigator.userAgent.match(/iPad/i) != null;
but I simply wonder if there is a trick to generally determine if the user is on Touch device? Because there are a lot more touch devices and tablets out there then just iPads.
但我只是想知道是否有一种技巧可以大致确定用户是否在触摸设备上？因为有更多的触摸设备和平板电脑，然后只有 iPad。
thank you.
谢谢你。
采纳答案by mplungjan
You can use the following JS function:
您可以使用以下 JS 函数：
function isTouchDevice() {
var el = document.createElement('div');
el.setAttribute('ongesturestart', 'return;'); // or try "ontouchstart"
return typeof el.ongesturestart === "function";
}
Source: Detecting touch-based browsing.
来源：检测基于触摸的浏览。
Please note the above code only tests if the browser has support for touch, not the device.
请注意上面的代码只测试浏览器是否支持触摸，而不是设备。
Related links:
相关链接：
- Optimize website for touch devices
- What is the best way to detect a mobile device in jQuery?
- What's the best way to detect a 'touch screen' device using JavaScript?
- Mozilla.org Detecting touch: it's the ‘why', not the ‘how'
There may be detection in jquery for mobileand jtouch
回答by Pratswinz
if ("ontouchstart" in document.documentElement)
{
alert("It's a touch screen device.");
}
else
{
alert("Others devices");
}
most simple code i found after browsing a lot here and there
我在这里和那里浏览了很多后发现的最简单的代码
回答by Gcoop
Include modernizer, which is a tiny feature detection library. Then you can use something like below.
包括Modernizer，这是一个很小的特征检测库。然后你可以使用类似下面的东西。
if (Modernizr.touch){
// bind to touchstart, touchmove, etc and watch `event.streamId`
} else {
// bind to normal click, mousemove, etc
}
回答by Julian F. Weinert
Using document.createEvent("TouchEvent")will not work on desktop-devices. So you can use it inside an if statement.
使用document.createEvent("TouchEvent")不适用于桌面设备。所以你可以在 if 语句中使用它。
Note that this method could produce errors on non-touch devices. I would prefer checking for ontouchstartin document.documentElement.
请注意，此方法可能会在非触摸设备上产生错误。我宁愿检查的ontouchstart在document.documentElement。
回答by Safran Ali
Check out this post, it gives a really nice code snippet for what to do when touch devices are detected or what to do if touchstart event is called:
查看这篇文章，它提供了一个非常好的代码片段，用于说明在检测到触摸设备时要做什么或在调用 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();
}
回答by Peter-Pan
If you use Modernizr, it is very easy to use Modernizr.touchas mentioned earlier.
如果您使用Modernizr，Modernizr.touch如前所述，它非常易于使用。
However, I prefer using a combination of Modernizr.touchand user agent testing, just to be safe.
但是，Modernizr.touch为了安全起见，我更喜欢结合使用和用户代理测试。
var deviceAgent = navigator.userAgent.toLowerCase();
var isTouchDevice = Modernizr.touch ||
(deviceAgent.match(/(iphone|ipod|ipad)/) ||
deviceAgent.match(/(android)/) ||
deviceAgent.match(/(iemobile)/) ||
deviceAgent.match(/iphone/i) ||
deviceAgent.match(/ipad/i) ||
deviceAgent.match(/ipod/i) ||
deviceAgent.match(/blackberry/i) ||
deviceAgent.match(/bada/i));
if (isTouchDevice) {
//Do something touchy
} else {
//Can't touch this
}
If you don't use Modernizr, you can simply replace the Modernizr.touchfunction above with ('ontouchstart' in document.documentElement)
如果你不使用 Modernizr，你可以简单地将Modernizr.touch上面的函数替换为('ontouchstart' in document.documentElement)
Also note that testing the user agent iemobilewill give you broader range of detected Microsoft mobile devices than Windows Phone.
另请注意，iemobile与Windows Phone.
