我编写了一个jQuery插件,可以在桌面和移动设备上使用.我想知道是否有一种方法可以检测设备是否具有触摸屏功能.我正在使用jquery-mobile.js来检测触摸屏事件,它可以在iOS,Android等上运行,但我也想根据用户的设备是否有触摸屏来编写条件语句.
那可能吗?
在像iPhone/iPad/Android这样的触摸设备上,用手指敲击一个小按钮很困难.没有跨浏览器方式来检测我所知道的CSS媒体查询的触摸设备.所以我检查浏览器是否支持javascript触摸事件.到目前为止,其他浏览器还没有支持它们,但是开发者频道上的最新Google Chrome 启用了触摸事件(即使是非触摸设备).而且我怀疑其他浏览器厂商会跟进,因为带触摸屏的笔记本电脑正在上市.更新:这是Chrome中的一个错误,所以现在JavaScript检测再次起作用.
这是我使用的测试:
function isTouchDevice() {
return "ontouchstart" in window;
}
Run Code Online (Sandbox Code Playgroud)
问题是,这只测试浏览器是否支持触摸事件,而不是设备.
有谁知道正确的[tm]方式为触控设备提供更好的用户体验?除了嗅探用户代理.
Mozilla有触摸设备的媒体查询.但我在其他任何浏览器中都没有看到类似的内容:https: //developer.mozilla.org/En/CSS/Media_queries#-moz-touch-enabled
更新:我想避免为移动/触摸设备使用单独的页面/网站.解决方案必须通过JavaScript检测具有对象检测功能的触摸设备,或者包含自定义触摸CSS而无需用户代理嗅探!我问的主要原因是,在我联系css3工作组之前,确保今天不可能.如果你不能按照问题的要求请不要回答;)
我想要一个使用相同HTML的网站,但要以最好的方式为它所服务的平台"小组化"它.
是否有一种标准做法,用于检测客户端上的移动设备/硬件键盘,并决定是否加载jQuery Mobile以及该站点的移动JavaScript或jQuery UI以及用于桌面体验的脚本?
以下似乎是一种合理的方法,但我想知道Modernizr.touch是否是检测此问题的最佳方法?例如:强制触摸可能不是Surface的最佳解决方案.有没有办法检测是否还有硬件键盘?
Modernizr.load({
test: Modernizr.touch,
yep : ['jquery-mobile.js','mobile.js']
nope: ['jquery-ui.js','desktop.js']
});
Run Code Online (Sandbox Code Playgroud)
编辑:
找到一些相关的Modernizr错误:
我想我真正需要的是一种检测设备是否能够触摸以及是否具有硬件键盘的方法.我可以使用David Mulder的答案来检测物理单位(英寸)中的设备宽度作为代理,并假设任何> 11英寸有键盘,但我打赌那里有一个大型平板电脑(或谷歌将发布nexus 12平板电脑: )这会做出错误的假设.
javascript ×3
touch ×2
css ×1
dom-events ×1
jquery ×1
jquery-ui ×1
mobile ×1
modernizr ×1
usability ×1