有没有办法检测用户是否在jQuery中使用移动设备?类似于CSS@media属性?如果浏览器在手持设备上,我希望运行不同的脚本。
jQuery$.browser函数不是我想要的。
有没有办法检测用户是否在jQuery中使用移动设备?类似于CSS@media属性?如果浏览器在手持设备上,我希望运行不同的脚本。
jQuery$.browser函数不是我想要的。
当前回答
这不是jQuery,但我发现了这个:http://detectmobilebrowser.com/
它提供了检测多种语言的移动浏览器的脚本,其中一种是JavaScript。这可能会帮助你找到你想要的东西。
但是,由于您使用的是jQuery,您可能需要了解jQuery.support集合。它是用于检测当前浏览器功能的财产集合。文档位于此处:http://api.jquery.com/jQuery.support/
因为我不知道你到底想做什么,所以我不知道其中哪一个最有用。
尽管如此,我认为最好的选择是使用服务器端语言(如果可以选择的话)重定向或编写不同的脚本到输出。由于您并不真正了解移动浏览器x的功能,因此在服务器端执行检测和更改逻辑将是最可靠的方法。当然,如果您不能使用服务器端语言,所有这些都是一个悬而未决的问题:)
其他回答
使用了前面提到的sequeelo解决方案,并添加了宽度/高度检查功能(以避免屏幕旋转错误)。为了选择移动视口的最小/最大边界,我使用了这个资源https://www.mydevice.io/#compare-设备
function isMobile() {
try{ document.createEvent("TouchEvent"); return true; }
catch(e){ return false; }
}
function deviceType() {
var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0),screenType;
if (isMobile()){
if ((width <= 650 && height <= 900) || (width <= 900 && height <= 650))
screenType = "Mobile Phone";
else
screenType = "Tablet";
}
else
screenType = "Desktop";
return screenType;
}
如果您使用Modernizr,那么很容易使用前面提到的Modernizr.touch。
然而,为了安全起见,我更喜欢使用Moderniz.touch和用户代理测试的组合。
var deviceAgent = navigator.userAgent.toLowerCase();
var isTouchDevice = Modernizr.touch ||
(deviceAgent.match(/(iphone|ipod|ipad)/) ||
deviceAgent.match(/(android)/) ||
deviceAgent.match(/(iemobile)/) ||
deviceAgent.match(/iphone/i) ||
deviceAgent.match(/ipad/i) ||
deviceAgent.match(/ipod/i) ||
deviceAgent.match(/blackberry/i) ||
deviceAgent.match(/bada/i));
if (isTouchDevice) {
//Do something touchy
} else {
//Can't touch this
}
如果您不使用Modernizr,您可以简单地将上面的Modernizr.touch函数替换为(document.documentElement中的“ntouchstart”)
还要注意,测试用户代理iemobile将为您提供比Windows Phone更广泛的检测到的Microsoft移动设备。
另请参阅此SO问题
这似乎是一个全面的现代解决方案:
https://github.com/matthewhudson/device.js
它可以检测多个平台,智能手机与平板电脑,以及方向。它还将类添加到BODY标记中,因此检测只发生一次,您可以通过一系列简单的jQuery hasClass函数来读取所使用的设备。
过来看。。。
[免责声明:我与写这封信的人无关。]
如果要测试用户代理,正确的方法是测试用户代理(即测试navigator.userAgent)。
如果用户伪造了这一点,他们就不必担心了。如果您测试.isUnix(),则不必担心系统是否为Unix。
作为一个用户,改变userAgent也可以,但如果你这样做了,你不希望站点能够正确呈现。
如果您希望为Microsoft浏览器提供支持,则应确保内容的前几个字符包含并测试您编写的每一页。
要旨始终按照标准进行编码。然后破解它,直到它在当前版本的IE中工作&不要期望它看起来很好。GitHub就是这么做的,他们刚刚拿到了1亿美元。
如果通过移动设备您了解可触摸设备,则可以通过检查触摸处理器的存在来确定:
let deviceType = (('ontouchstart' in window)
|| (navigator.maxTouchPoints > 0)
|| (navigator.msMaxTouchPoints > 0)
) ? 'touchable' : 'desktop';
它不需要jQuery。