blocks|key|4710785|text|您可以使用以下JS函数：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4710786|function+isTouchDevice()+{
+++var+el+=+document.createElement('div');
+++el.setAttribute('ongesturestart',+'return;');+//+or+try+"ontouchstart"
+++return+typeof+el.ongesturestart+===+"function";
}|code-block|syntax|javascript|4710787|来源：Detecting+touch-based+browsing。|offset|length|4710788|请注意，上面的代码只测试浏览器是否支持触摸，而不是设备。|4710789|相关链接：|4710790|4710791|Optimize+website+for+touch+devices|unordered-list-item|4710792|What+is+the+best+way+to+detect+a+mobile+device+in+jQuery?|4710793|What's+the+best+way+to+detect+a+'touch+screen'+device+using+JavaScript?|4710794|Mozilla.org+Detecting+touch:+it’s+the+‘why’,+not+the+‘how’|4710795|4710796|在jquery+for+mobile和jtouch中可能存在检测|4710797|entityMap|0|LINK|mutability|MUTABLE|url|http://alastairc.ac/2010/03/detecting-touch-based-browsing/|1|https://stackoverflow.com/questions/2607248/optimize-website-for-touch-devices|2|https://stackoverflow.com/questions/3514784/best-way-to-detect-handheld-device-in-jquery|3|https://stackoverflow.com/questions/4817029/whats-the-best-way-to-detect-a-touch-screen-device-using-javascript|4|https://hacks.mozilla.org/2013/04/detecting-touch-its-the-why-not-the-how/|5|http://jquerymobile.com/|6|http://jqtouch.com/^0|0|0|3|U|0|0|0|0|0|0|Y|1|0|0|1L|2|0|0|1Z|3|0|0|1M|4|0|0|1|H|5|J|6|6|0^^$0|@$1|2|3|4|5|6|7|1L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|1N|8|@]|9|@$I|1O|J|1P|1|1Q]]|A|$]]|$1|K|3|L|5|6|7|1R|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1S|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|1T|8|@]|9|@]|A|$]]|$1|P|3|Q|5|R|7|1U|8|@]|9|@$I|1V|J|1W|1|1X]]|A|$]]|$1|S|3|T|5|R|7|1Y|8|@]|9|@$I|1Z|J|20|1|21]]|A|$]]|$1|U|3|V|5|R|7|22|8|@]|9|@$I|23|J|24|1|25]]|A|$]]|$1|W|3|X|5|R|7|26|8|@]|9|@$I|27|J|28|1|29]]|A|$]]|$1|Y|3|-4|5|6|7|2A|8|@]|9|@]|A|$]]|$1|Z|3|10|5|6|7|2B|8|@]|9|@$I|2C|J|2D|1|2E]|$I|2F|J|2G|1|2H]]|A|$]]|$1|11|3|-4|5|6|7|2I|8|@]|9|@]|A|$]]]|12|$13|$5|14|15|16|A|$17|18]]|19|$5|14|15|16|A|$17|1A]]|1B|$5|14|15|16|A|$17|1C]]|1D|$5|14|15|16|A|$17|1E]]|1F|$5|14|15|16|A|$17|1G]]|1H|$5|14|15|16|A|$17|1I]]|1J|$5|14|15|16|A|$17|1K]]]]

You can use the following JS function:

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

Source: <a href="http://alastairc.ac/2010/03/detecting-touch-based-browsing/" rel="nofollow noreferrer">Detecting touch-based browsing</a>.

Please note the above code only tests if the browser has support for touch, not the device.

Related links:

<ul>
<li><a href="https://stackoverflow.com/questions/2607248/optimize-website-for-touch-devices">Optimize website for touch devices</a></li>
<li><a href="https://stackoverflow.com/questions/3514784/best-way-to-detect-handheld-device-in-jquery">What is the best way to detect a mobile device in jQuery?</a></li>
<li><a href="https://stackoverflow.com/questions/4817029/whats-the-best-way-to-detect-a-touch-screen-device-using-javascript">What&#39;s the best way to detect a &#39;touch screen&#39; device using JavaScript?</a></li>
<li><a href="https://hacks.mozilla.org/2013/04/detecting-touch-its-the-why-not-the-how/" rel="nofollow noreferrer">Mozilla.org Detecting touch: it’s the ‘why’, not the ‘how’</a></li>
</ul>

There may be detection in <a href="http://jquerymobile.com/" rel="nofollow noreferrer">jquery for mobile</a> and <a href="http://jqtouch.com/" rel="nofollow noreferrer">jtouch</a>

blocks|key|1020809|text|包括modernizer，它是一个小型特征检测库。然后你可以使用下面这样的东西。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1020810|if+(Modernizr.touch){
+++//+bind+to+touchstart,+touchmove,+etc+and+watch+`event.streamId`
}+else+{
+++//+bind+to+normal+click,+mousemove,+etc
}|code-block|syntax|javascript|1020811|entityMap|0|LINK|mutability|MUTABLE|url|http://www.modernizr.com/^0|2|A|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

Include <a href="http://www.modernizr.com/" rel="noreferrer">modernizer</a>, which is a tiny feature detection library. Then you can use something like below.

<pre><code>if (Modernizr.touch){
 // bind to touchstart, touchmove, etc and watch `event.streamId`
} else {
 // bind to normal click, mousemove, etc
}
</code></pre>

blocks|key|4710829|text|看看这个post，它提供了一个非常好的代码片段，告诉你当检测到触摸设备时该怎么做，或者调用touchstart事件时该怎么做：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4710830|$(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();
}|code-block|syntax|javascript|4710831|entityMap|0|LINK|mutability|MUTABLE|url|http://www.sitepoint.com/adapting-an-interface-for-touch-devices/^0|4|4|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

Check out this <a href="http://www.sitepoint.com/adapting-an-interface-for-touch-devices/" rel="nofollow">post</a>, 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:

<pre><code>$(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 &amp; 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();
}
</code></pre>

blocks|key|1020850|text|在桌面设备上使用document.createEvent("TouchEvent")将不起作用。所以你可以在if语句中使用它。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1020851|请注意，此方法可能会在非触摸设备上产生错误。我更喜欢在document.documentElement中检查ontouchstart。|1020852|entityMap^0|8|Y|0|R|O|1I|C|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|R|8|@]|D|@]|E|$]]]|I|$]]

Using <code>document.createEvent("TouchEvent")</code> will not work on desktop-devices. So you can use it inside an if statement.

Note that this method could produce errors on non-touch devices. I would prefer checking for <code>ontouchstart</code> in <code>document.documentElement</code>.

blocks|key|2637616|text|if+("ontouchstart"+in+document.documentElement)
{
++alert("It's+a+touch+screen+device.");
}
else
{
+alert("Others+devices");
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2637617|我在到处浏览后发现的大多数简单代码|unstyled|2637618|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>if ("ontouchstart" in document.documentElement)
{
 alert("It's a touch screen device.");
}
else
{
 alert("Others devices");
}
</code></pre>

most simple code i found after browsing a lot here and there

blocks|key|2922176|text|如果您使用Modernizr，那么使用前面提到的Modernizr.touch是非常容易的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2922177|但是，为了安全起见，我更喜欢使用Modernizr.touch和用户代理测试的组合。|2922178|var+deviceAgent+=+navigator.userAgent.toLowerCase();

var+isTouchDevice+=+Modernizr.touch+%7C%7C+
(deviceAgent.match(/(iphone%7Cipod%7Cipad)/)+%7C%7C
deviceAgent.match(/(android)/)++%7C%7C+
deviceAgent.match(/(iemobile)/)+%7C%7C+
deviceAgent.match(/iphone/i)+%7C%7C+
deviceAgent.match(/ipad/i)+%7C%7C+
deviceAgent.match(/ipod/i)+%7C%7C+
deviceAgent.match(/blackberry/i)+%7C%7C+
deviceAgent.match(/bada/i));

if+(isTouchDevice)+{
++++++++//Do+something+touchy
++++}+else+{
++++++++//Can't+touch+this
++++}|code-block|syntax|javascript|2922179|如果你不使用现代，你可以简单地用('ontouchstart'+in+document.documentElement)替换上面的Modernizr.touch函数|2922180|还要注意，与Windows+Phone相比，测试用户代理iemobile将提供更广泛的检测到的微软移动设备。|2922181|Also+see+this+SO+question|2922182|entityMap|0|LINK|mutability|MUTABLE|url|http://modernizr.com/|1|https://stackoverflow.com/questions/6262584/how-to-determine-if-the-client-is-a-touch-device^0|O|F|5|9|0|0|G|F|0|0|G|18|1T|F|0|6|D|S|8|0|0|P|1|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@$9|15|A|16|1|17]]|E|$]]|$1|F|3|G|5|6|7|18|8|@$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|1B|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1C|8|@$9|1D|A|1E|B|C]|$9|1F|A|1G|B|C]]|D|@]|E|$]]|$1|O|3|P|5|6|7|1H|8|@$9|1I|A|1J|B|C]|$9|1K|A|1L|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1M|8|@]|D|@$9|1N|A|1O|1|1P]]|E|$]]|$1|S|3|-4|5|6|7|1Q|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]|10|$5|V|W|X|E|$Y|11]]]]

If you use <a href="http://modernizr.com/" rel="nofollow noreferrer">Modernizr</a>, it is very easy to use <code>Modernizr.touch</code> as mentioned earlier.

However, I prefer using a combination of <code>Modernizr.touch</code> and user agent testing, just to be safe.

<pre><code>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
 }
</code></pre>

If you don't use Modernizr, you can simply replace the <code>Modernizr.touch</code> function above with <code>('ontouchstart' in document.documentElement)</code>

Also note that testing the user agent <code>iemobile</code> will give you broader range of detected Microsoft mobile devices than <code>Windows Phone</code>.

<a href="https://stackoverflow.com/questions/6262584/how-to-determine-if-the-client-is-a-touch-device">Also see this SO question</a>

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
<code>var isiPad = navigator.userAgent.match(/iPad/i) != null;</code>

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.

thank you.

How to determine if the client is a touch device

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

有没有什么好的、干净的方法或技巧来发现用户是否在使用触摸屏设备？我知道有像var isiPad = navigator.userAgent.match(/iPad/i) != null;这样的东西但我只是想知道是否有一个技巧来确定用户是否在使用Touch设备？因为市场上的触控设备和平板电脑比iPads多得多。谢谢。

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

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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