modernizr_使用Modernizr检测“触摸屏”设备[Quicktip]

我对这些年来手机的发展感到惊讶。 如今，手机具有触摸功能，可用于在台式机上浏览网站，并携带许多方便的应用程序来帮助您提高工作效率。 当我们建立针对移动设备的响应式网站时，有时我们希望包括特定的和额外的功能供用户使用其多点触控功能。

但是在此之前，我们需要首先确定该设备是否支持触摸交互，而使用Modernizr则很容易做到。

使用Modernizr进行特征检测

在Modernizr下载页面上 ，确保选择了“ 触摸事件”选项。

然后，您可以在脚本中添加这个Modernizr.touch 。 这是一个简单的示例，用于说明设备是否支持触摸。

if (Modernizr.touch) { 
	alert('Touch Screen');
} else { 
	alert('No Touch Screen');
}

这是一个基本JavaScript，将显示以下弹出窗口。

此外，您还可以使用此方法有条件地加载touchSwipe （一个用于触摸手势的jQuery插件）。 您可以使用Modernizr.load方法执行以下操作。

Modernizr.load({
	test: Modernizr.touch,
	yep : 'touchSwipe.js',
});

上面的代码将测试触摸功能。 如果返回yep ，则表示浏览器/设备能够运行，它将加载touchSwipe.js 。

最终思想

随着越来越多的人购买触摸屏设备，最好在可能的情况下允许您的网站启用触摸功能。 这将为您的访问者留下良好的印象，并有助于提高用户参与度。 第一步是能够检测设备是否支持触摸。

翻译自: https://www.hongkiat.com/blog/detect-touch-device-modernizr/