我编写了一个jQuery插件，可以在桌面和移动设备上使用。我想知道是否有一种方法可以用JavaScript来检测设备是否具有触摸屏功能。我使用jquery-mobile.js来检测触摸屏事件，它适用于iOS, Android等，但我也想根据用户的设备是否有触摸屏来编写条件语句。
这可能吗?
当前回答
更新:在将整个功能检测库拉入你的项目之前，请阅读下面blmstr的回答。检测实际的触摸支持更加复杂，Modernizr只涵盖了一个基本的用例。
Modernizr是一种很棒的轻量级方法，可以在任何网站上进行各种特征检测。
它只是为每个特性在html元素中添加类。
然后你可以在CSS和JS中轻松地瞄准这些功能。例如:
html.touch div {
width: 480px;
}
html.no-touch div {
width: auto;
}
和Javascript (jQuery示例):
$('html.touch #popup').hide();
其他回答
事实上，我研究了这个问题并考虑了各种情况。因为这在我的项目中也是一个大问题。所以我达到了下面的功能，它适用于所有设备上所有浏览器的所有版本:
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只返回布尔值。
更新:在将整个功能检测库拉入你的项目之前，请阅读下面blmstr的回答。检测实际的触摸支持更加复杂，Modernizr只涵盖了一个基本的用例。
Modernizr是一种很棒的轻量级方法，可以在任何网站上进行各种特征检测。
它只是为每个特性在html元素中添加类。
然后你可以在CSS和JS中轻松地瞄准这些功能。例如:
html.touch div {
width: 480px;
}
html.no-touch div {
width: auto;
}
和Javascript (jQuery示例):
$('html.touch #popup').hide();
到目前为止，这似乎对我来说很有效:
//Checks if a touch screen
is_touch_screen = 'ontouchstart' in document.documentElement;
if (is_touch_screen) {
// Do something if a touch screen
}
else {
// Not a touch screen (i.e. desktop)
}
所有浏览器支持，除了Firefox桌面始终为TRUE，因为Firefox桌面支持响应式设计的开发人员，即使你点击触摸按钮或不!
我希望Mozilla在下一个版本中解决这个问题。
我用的是火狐28桌面版。
function isTouch()
{
return !!("ontouchstart" in window) || !!(navigator.msMaxTouchPoints);
}
有一种方法比检查他们是否拥有触摸屏更好，那就是检查他们是否正在使用触摸屏，而且这更容易检查。
if (window.addEventListener) {
var once = false;
window.addEventListener('touchstart', function(){
if (!once) {
once = true;
// Do what you need for touch-screens only
}
});
}
