更新:在将整个功能检测库拉入你的项目之前，请阅读下面blmstr的回答。检测实际的触摸支持更加复杂，Modernizr只涵盖了一个基本的用例。

Modernizr是一种很棒的轻量级方法，可以在任何网站上进行各种特征检测。

它只是为每个特性在html元素中添加类。

然后你可以在CSS和JS中轻松地瞄准这些功能。例如:

html.touch div {
    width: 480px;
}

html.no-touch div {
    width: auto;
}

和Javascript (jQuery示例):

$('html.touch #popup').hide();

var isTouchScreen = 'createTouch' in document;

or

var isTouchScreen = 'createTouch' in document || screen.width <= 699 || 
    ua.match(/(iPhone|iPod|iPad)/) || ua.match(/BlackBerry/) || 
    ua.match(/Android/);

我想会进行更彻底的检查。

我们尝试了modernizr实现，但检测触摸事件不再一致(IE 10有触摸事件在windows桌面，IE 11工作，因为已经放弃触摸事件和添加指针api)。

所以我们决定优化网站作为一个触摸网站，只要我们不知道用户有什么输入类型。这比任何其他解决方案都更可靠。

我们的研究表明，大多数桌面用户在点击之前会将鼠标移到屏幕上，所以我们可以检测到他们，并在他们能够点击或悬停任何东西之前改变他们的行为。

这是我们代码的简化版本:

var isTouch = true;
window.addEventListener('mousemove', function mouseMoveDetector() {
    isTouch = false;
    window.removeEventListener('mousemove', mouseMoveDetector);
});

更新:在将整个功能检测库拉入你的项目之前，请阅读下面blmstr的回答。检测实际的触摸支持更加复杂，Modernizr只涵盖了一个基本的用例。

Modernizr是一种很棒的轻量级方法，可以在任何网站上进行各种特征检测。

它只是为每个特性在html元素中添加类。

然后你可以在CSS和JS中轻松地瞄准这些功能。例如:

html.touch div {
    width: 480px;
}

html.no-touch div {
    width: auto;
}

和Javascript (jQuery示例):

$('html.touch #popup').hide();

由于引入了交互媒体功能，你可以简单地做到:

if(window.matchMedia("(pointer: coarse)").matches) {
    // touchscreen
}

https://www.w3.org/TR/mediaqueries-4/#descdef-media-any-pointer

更新(由于评论):上面的解决方案是检测“粗指针”——通常是触摸屏——是否是主要输入设备。如果你想检测一个带有鼠标的设备是否也有触摸屏，你可以使用任意指针:粗。

有关更多信息，请查看这里:检测浏览器没有鼠标，只能触摸

由于Modernizr无法检测Windows Phone 8/WinRT上的IE10，一个简单的跨浏览器解决方案是:

var supportsTouch = 'ontouchstart' in window || navigator.msMaxTouchPoints;

你只需要检查一次，因为设备不会突然支持或不支持触摸，所以只需将它存储在一个变量中，这样你就可以更有效地多次使用它。