我编写了一个jQuery插件，可以在桌面和移动设备上使用。我想知道是否有一种方法可以用JavaScript来检测设备是否具有触摸屏功能。我使用jquery-mobile.js来检测触摸屏事件，它适用于iOS, Android等，但我也想根据用户的设备是否有触摸屏来编写条件语句。
这可能吗?
当前回答
jQuery扩展支持对象:
jQuery.support.touch = 'ontouchend' in document;
现在你可以在任何地方检查它，像这样:
if( jQuery.support.touch )
// do touch stuff
其他回答
你可以安装modernizer并使用一个简单的触摸事件。这是非常有效的，工作在每一个设备上，我已经测试了它包括窗户表面!
我已经创建了一个jsFiddle
function isTouchDevice(){
if(Modernizr.hasEvent('touchstart') || navigator.userAgent.search(/Touch/i) != -1){
alert("is touch");
return true;
}else{
alert("is not touch");
return false;
}
}
事实上，我研究了这个问题并考虑了各种情况。因为这在我的项目中也是一个大问题。所以我达到了下面的功能，它适用于所有设备上所有浏览器的所有版本:
const isTouchDevice = () => {
const prefixes = ['', '-webkit-', '-moz-', '-o-', '-ms-', ''];
const mq = query => window.matchMedia(query).matches;
if (
'ontouchstart' in window ||
(window.DocumentTouch && document instanceof DocumentTouch)
) {
return true;
}
return mq(['(', prefixes.join('touch-enabled),('), 'heartz', ')'].join(''));
};
提示:显然，isTouchDevice只返回布尔值。
实际的答案似乎是一个考虑上下文的答案:
1)公共站点(无法登录) 编写UI代码以同时使用这两个选项。
2)登录站点 捕获登录表单上是否发生了鼠标移动，并将其保存到隐藏的输入中。该值与登录凭据一起传递，并添加到用户的会话中，因此可以在会话期间使用它。
Jquery只添加到登录页面:
$('#istouch').val(1); // <-- value will be submitted with login form
if (window.addEventListener) {
window.addEventListener('mousemove', function mouseMoveListener(){
// Update hidden input value to false, and stop listening
$('#istouch').val(0);
window.removeEventListener('mousemove', mouseMoveListener);
});
}
(@Dave Burt +1， @Martin Lantzsch +1)
这个即使在Windows Surface平板电脑上也能很好地工作!!
function detectTouchSupport {
msGesture = window.navigator && window.navigator.msPointerEnabled && window.MSGesture,
touchSupport = (( "ontouchstart" in window ) || msGesture || window.DocumentTouch && document instanceof DocumentTouch);
if(touchSupport) {
$("html").addClass("ci_touch");
}
else {
$("html").addClass("ci_no_touch");
}
}
我喜欢这个:
function isTouchDevice(){
return window.ontouchstart !== undefined;
}
alert(isTouchDevice());
