有没有办法检测用户是否在jQuery中使用移动设备?类似于CSS@media属性?如果浏览器在手持设备上,我希望运行不同的脚本。
jQuery$.browser函数不是我想要的。
有没有办法检测用户是否在jQuery中使用移动设备?类似于CSS@media属性?如果浏览器在手持设备上,我希望运行不同的脚本。
jQuery$.browser函数不是我想要的。
当前回答
使用了前面提到的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;
}
其他回答
所有答案都使用用户代理来检测浏览器,但基于用户代理的设备检测不是很好的解决方案,最好是检测触摸设备等功能(在新的jQuery中,他们删除了$.browser,改用$.support)。
要检测移动设备,您可以检查触摸事件:
function is_touch_device() {
return 'ontouchstart' in window // works on most browsers
|| 'onmsgesturechange' in window; // works on ie10
}
摘自使用JavaScript检测“触摸屏”设备的最佳方法是什么?
在一行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
mobiledetect.net怎么样?
其他解决方案似乎过于基础。这是一个轻量级的PHP类。它使用用户代理字符串和特定的HTTP标头来检测移动环境。您还可以通过使用任何第三方插件从Mobile Detect中获益:WordPress、Drupal、Joomla、Magento等。
我很惊讶没有人指出一个好的网站:http://detectmobilebrowsers.com/它已经为移动检测准备好了不同语言的代码(包括但不限于):
阿帕奇ASP软件C类#IIS公司JavaScript发动机发动机PHP文件Perl语言蟒蛇轨道
如果您也需要检测平板电脑,只需查看“关于”部分以获取其他RegEx参数。
Android平板电脑、iPad、Kindle Fires和PlayBook未被设计要添加对平板电脑的支持,请将|android | ipad | playbook | silk添加到第一个正则表达式。
这是我在项目中使用的代码:
function isMobile() {
try {
if(/Android|webOS|iPhone|iPad|iPod|pocket|psp|kindle|avantgo|blazer|midori|Tablet|Palm|maemo|plucker|phone|BlackBerry|symbian|IEMobile|mobile|ZuneWP7|Windows Phone|Opera Mini/i.test(navigator.userAgent)) {
return true;
};
return false;
} catch(e){ console.log("Error in isMobile"); return false; }
}