我正在寻找一个函数,返回一个布尔值,如果用户正在使用移动浏览器与否。
我知道我可以使用导航器。userAgent并使用regex编写该函数,但是用户代理对于不同的平台来说太复杂了。我怀疑匹配所有可能的设备是否容易,我认为这个问题已经解决了很多次,所以应该有某种完整的解决方案来完成这样的任务。
我正在看这个网站,但不幸的是,脚本是如此神秘,我不知道如何使用它为我的目的,这是创建一个返回true/false的函数。
我正在寻找一个函数,返回一个布尔值,如果用户正在使用移动浏览器与否。
我知道我可以使用导航器。userAgent并使用regex编写该函数,但是用户代理对于不同的平台来说太复杂了。我怀疑匹配所有可能的设备是否容易,我认为这个问题已经解决了很多次,所以应该有某种完整的解决方案来完成这样的任务。
我正在看这个网站,但不幸的是,脚本是如此神秘,我不知道如何使用它为我的目的,这是创建一个返回true/false的函数。
当前回答
功能检测比试图弄清楚你在使用哪个设备要好得多,而且很难跟上新设备的步伐,像Modernizr这样的库可以让你知道某个特定功能是否可用。
其他回答
我遇到过一些情况,上面的答案对我不起作用。所以我想到了这个。可能对某人有帮助。
if(/iPhone|iPad|iPod|Android|webOS|BlackBerry|Windows Phone/i.test(navigator.userAgent)
|| screen.availWidth < 480){
//code for mobile
}
这取决于您的用例。如果你专注于屏幕使用屏幕。availWidth,或者你可以使用document.body. clientwidth如果你想基于document进行渲染。
功能检测比试图弄清楚你在使用哪个设备要好得多,而且很难跟上新设备的步伐,像Modernizr这样的库可以让你知道某个特定功能是否可用。
返回'ontouchstart'在window && window.screen. availwidth < 768
这个怎么样,它扩展了上面的答案,但也检查了屏幕大小
触摸屏和方向解决方案在某些个人电脑上无法使用。
一些笔记本电脑有触摸屏,希望将来会有更多。 另外,虽然我无法亲自测试,但一些图形平板电脑可以作为屏幕使用,可以使用触摸屏。
探测方向也行不通。微软(Microsoft) Surface Books等一些个人电脑拥有可拆卸的屏幕,使其像平板电脑一样工作,包括定向支持。但它仍然是一台真正的个人电脑。
如果你必须检测和区分PC和移动,只需阅读用户代理。 我也不喜欢它,但它仍然是最好的方式。
const isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i) || navigator.userAgent.match(/WPDesktop/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
如何使用
if( isMobile.any() ) alert('Mobile');
要查看用户是否在特定的移动设备上:
if( isMobile.iOS() ) alert('iOS');
裁判:http://www.abeautifulsite.net/blog/2011/11/detecting-mobile-devices-with-javascript
github上的增强版:https://github.com/smali-kazmi/detect-mobile-browser