有没有办法检测用户是否在jQuery中使用移动设备?类似于CSS@media属性?如果浏览器在手持设备上,我希望运行不同的脚本。
jQuery$.browser函数不是我想要的。
有没有办法检测用户是否在jQuery中使用移动设备?类似于CSS@media属性?如果浏览器在手持设备上,我希望运行不同的脚本。
jQuery$.browser函数不是我想要的。
当前回答
这似乎是一个全面的现代解决方案:
https://github.com/matthewhudson/device.js
它可以检测多个平台,智能手机与平板电脑,以及方向。它还将类添加到BODY标记中,因此检测只发生一次,您可以通过一系列简单的jQuery hasClass函数来读取所使用的设备。
过来看。。。
[免责声明:我与写这封信的人无关。]
其他回答
在一行javascript中:
var isMobile = ('ontouchstart' in document.documentElement && /mobi/i.test(navigator.userAgent));
如果用户代理包含“Mobi”(根据MDN)并且ontouchstart可用,那么它很可能是一个移动设备。
EDIT:根据评论中的反馈更新正则表达式代码。使用regex/mobi/i,i不区分大小写,mobi匹配所有移动浏览器。看见https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent/Firefox
我建议使用以下字符串组合,以检查是否使用了设备类型。
根据Mozilla文档字符串,建议使用Mobi。但是,如果只使用Mobi,一些旧的平板电脑不会返回真值,因此我们也应该使用Tablet字符串。
同样,为了安全起见,iPad和iPhone字符串也可以用来检查设备类型。
大多数新设备将仅对Mobi字符串返回true。
if (/Mobi|Tablet|iPad|iPhone/.test(navigator.userAgent)) {
// do something
}
移动设备的具体功能是什么,这意味着你想要不同的行为?
是输入机制(触摸和虚拟键盘与鼠标和物理键盘)、更小的屏幕尺寸还是其他原因?
例如,在CSS4中,您可以为支持触摸的设备使用@media(任何指针:粗糙),而为主要输入为触摸的设备(即,无论是否插入外部键盘,手机和平板电脑)使用@media(指针:粗略)。现代浏览器大多完全支持CSS4。
在JavaScript中,您可以使用Window.matchMedia()测试任何CSS媒体查询(包括上面的查询),如本SO答案中所建议的。(我本来希望现在能有更本土的东西,但找不到任何东西。)
navigator.userAgentData.mobile返回[true|false]
我使用这个解决方案,它在所有设备上都很好:
if (typeof window.orientation !== "undefined" || navigator.userAgent.indexOf('IEMobile') !== -1) {
//is_mobile
}