有没有一种可靠的方法来检测用户是否在jQuery中使用移动设备？类似于CSS @media属性的东西？如果浏览器在手持设备上,我想运行不同的脚本.
jQuery $.browser函数不是我想要的.
我正在寻找一个函数,如果用户有移动浏览器,则返回布尔值.
我知道我可以使用navigator.userAgent正则表达式来使用和编写该函数,但是用户代理对于不同的平台来说太多了.我怀疑匹配所有可能的设备会很容易,我认为这个问题已经解决了很多次,所以应该有一些完整的解决方案来完成这样的任务.
我正在看这个网站,但遗憾的是脚本是如此神秘,以至于我不知道如何将它用于我的目的,即创建一个返回true/false的函数.
javascript browser-detection mobile-browser platform-detection
我绝不是Javascript的专家,但我一直在阅读Mark Pilgrim的"潜入HTML5"网页,他提到了一些我想要更好理解的内容.
他说:
最后,使用双负技巧将结果强制为布尔值(true或false).
function supports_canvas() {
return !!document.createElement('canvas').getContext;
}
如果有人能够更好地解释这一点我会很感激!
我正在开发一个必须在各种设备上运行的移动网站.黑莓手机让我头疼的是黑莓.
我们需要支持键盘点击和触摸事件.
理想情况下,我只是使用:
$thing.click(function(){...})
但我们遇到的问题是,这些黑莓设备中的一些从触摸到触发点击时会有非常烦人的延迟.
解决方法是改为使用touchstart:
$thing.bind('touchstart', function(event){...})
但是,如何绑定这两个事件,但只触发一个？我仍然需要键盘设备的click事件,但当然,如果我使用触摸设备,则不希望点击事件触发.
一个额外的问题:是否有这样做,另外还适用于甚至没有touchstart事件的浏览器？在研究这个问题时,看起来BlackBerry OS5不支持touchstart,因此还需要依赖该浏览器的点击事件.
附录:
也许更全面的问题是:
使用jQuery,是否可以/建议使用相同的绑定处理触摸交互和鼠标交互？
理想情况下,答案是肯定的.如果没有,我有一些选择:
1)我们使用WURFL获取设备信息,因此可以创建我们自己的设备矩阵.根据设备的不同,我们将使用touchstart或点击.
2)通过JS检测浏览器中的触摸支持(我需要对此进行更多的研究,但似乎这是可行的).
但是,这仍然存在一个问题:支持BOTH的设备如何.我们支持的一些手机(即Nokias和黑莓手机)同时具有触摸屏和键盘.所以这种方式让我完全回到原来的问题......是否有办法允许两者同时以某种方式？
我正在开发一个webapp(不是一个有趣文本页面的网站),它有一个非常不同的触摸界面(当你点击时你的手指隐藏屏幕)和鼠标(严重依赖于悬停预览).如何检测到我的用户没有鼠标向他显示正确的界面？我计划为鼠标和触摸的人留下一个开关(就像一些笔记本电脑).
浏览器中的触摸事件功能实际上并不意味着用户正在使用触摸设备(例如,Modernizr不会剪切它).如果设备有鼠标,正确回答问题的代码应该返回false,否则返回true.对于具有鼠标和触摸功能的设备,它应该返回false(不是仅触摸)
作为旁注,我的触摸界面可能也适用于仅限键盘的设备,因此更多的是缺少我想要检测的鼠标.
为了使需求更加清晰,以下是我要实现的API:
// Level 1
// The current answers provide a way to do that.
hasTouch();
// Returns true if a mouse is expected.
// Note: as explained by the OP, this is not !hasTouch()
// I don't think we have this in the answers already, that why I offer a bounty
hasMouse();
// Level 2 (I don't think it's possible, but maybe I'm wrong, so why not asking)
// callback is called when the result of "hasTouch()" …在Javascript/jQuery中,如何检测客户端设备是否有鼠标？
当用户将鼠标悬停在某个项目上时,我有一个可以向上滑动一个小信息面板的网站.我正在使用jQuery.hoverIntent来检测悬停,但这显然不适用于iPhone/iPad/Android等触摸屏设备.所以在那些设备上,我想恢复点击以显示信息面板.
我正在编写一个旨在从台式机和平板电脑上使用的网站.当从桌面访问它时,我希望屏幕的可点击区域点亮:hover效果(不同的背景颜色等).使用平板电脑,没有鼠标,所以我不想要任何悬停效果.
问题是,当我在平板电脑上点击一些东西时,浏览器显然有某种"隐形鼠标光标",它移动到我点击的位置,然后将其留在那里 - 所以我刚刚点击的东西点亮了悬停效果,直到我点击其他东西.
我在使用鼠标时如何获得悬停效果,但在使用触摸屏时抑制它们？
如果有人想提出建议,我不想使用用户代理嗅探.同样的设备可能同时具有触摸屏和鼠标(今天可能不常见,但将来会更加如此).我对该设备不感兴趣,我对它目前的使用方式感兴趣:鼠标或触摸屏.
我已经尝试挂钩touchstart,touchmove和touchend事件,并呼吁preventDefault()对所有的人,这确实抑制"隐形鼠标"的一些时间; 但是如果我在两个不同的元素之间来回快速点击,经过几次点击它就会开始移动"鼠标光标"并点亮悬停效果 - 这就像我preventDefault并不总是很荣幸.除非必要,否则我不会厌倦你的细节 - 我甚至不确定这是正确的方法; 如果有人有更简单的解决方案,我会全力以赴.
编辑:这可以用沼泽标准的CSS :hover重现,但这里有一个快速的repro供参考.
<style>
.box { border: 1px solid black; width: 150px; height: 150px; }
.box:hover { background: blue; }
</style>
<div class="box"></div>
<div class="box"></div>
如果你鼠标悬停在其中任何一个框上,它将获得我想要的蓝色背景.但是如果你点击其中任何一个盒子,它也会得到一个蓝色背景,这是我试图阻止的事情.
我还在这里发布了一个示例,它可以完成上述操作并且还可以挂钩jQuery的鼠标事件.您可以使用它来查看点击事件也会触发mouseenter,mousemove以及mouseleave.
:hover如果用户通过触摸设备访问我们的网站,我想忽略所有CSS声明.因为:hoverCSS没有意义,如果平板电脑在点击/点击时触发它,它甚至会令人不安,因为它可能会坚持直到元素失去焦点.说实话,我不知道为什么触摸设备:hover首先需要触发- 但这是现实,所以这个问题也是现实.
a:hover {
color:blue;
border-color:green;
// etc. > ignore all at once for touch devices
}
那么,(如何):hover在声明触摸设备之后,我可以一次性删除/忽略所有CSS 声明(不必知道每一个)吗？
我被要求创建一个实际的HTML页面/ JavaScript来模拟使用JavaScript代码检测移动设备(iPhone/iPad/Android).然后,这将使用户进入另一个屏幕,询问他们的电子邮件地址.
是否有任何漂亮和干净的方法或技巧,以确定用户是否在触摸设备上？
我知道有类似的东西
var isiPad = navigator.userAgent.match(/iPad/i) != null;
但我只是想知道是否有一个技巧来确定用户是否在Touch设备上？因为有更多的触摸设备和平板电脑,那么只有iPad.
谢谢.