我正在寻找一个函数，返回一个布尔值，如果用户正在使用移动浏览器与否。
我知道我可以使用导航器。userAgent并使用regex编写该函数，但是用户代理对于不同的平台来说太复杂了。我怀疑匹配所有可能的设备是否容易，我认为这个问题已经解决了很多次，所以应该有某种完整的解决方案来完成这样的任务。
我正在看这个网站，但不幸的是，脚本是如此神秘，我不知道如何使用它为我的目的，这是创建一个返回true/false的函数。
当前回答
isMobile() {
if ('maxTouchPoints' in navigator) return navigator.maxTouchPoints > 0;
const mQ = matchMedia?.('(pointer:coarse)');
if (mQ?.media === '(pointer:coarse)') return !!mQ.matches;
if ('orientation' in window) return true;
return /\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(navigator.userAgent) ||
/\b(Android|Windows Phone|iPad|iPod)\b/i.test(navigator.userAgent);
}
导航器。不建议使用userAgent嗅探，因为它不可靠且变化很大。正如您在这里看到的:https://developers.whatismybrowser.com/useragents/explore/导航器。userAgent字符串在同一浏览器的不同版本之间可能有很大差异。
这篇MDN文章可以支持这种说法:https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent#avoiding_user_agent_detection。
上面的答案是对著名的MDN文章中建议的移动检测解决方案的重构。它首先依赖于特性检查，然后作为导航器的最后手段进行回退。userAgent嗅探。
编码快乐!＜3
其他回答
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
这就是我用的。我知道userAgent嗅探是不受欢迎的，但我的需求恰好是排除的之一!
<script>
var brow = navigator.userAgent;
if (/mobi/i.test(brow)) {
alert('Mobile Browser');
// Do something for mobile
} else {
alert('Not on Mobile');
// Do something for non mobile
}
</script>
一旦元素获得焦点，就可以立即模糊它。Bootstrap-datepicker是一个非常受欢迎且维护良好的组件，在GitHub中有近10,000个星星，它使用了这种方法:
if (window.navigator.maxTouchPoints || 'ontouchstart' in document) {
this.input.blur();
}
https://github.com/uxsolutions/bootstrap-datepicker
谢谢跳跳虎的帮助。
isMobile() {
if ('maxTouchPoints' in navigator) return navigator.maxTouchPoints > 0;
const mQ = matchMedia?.('(pointer:coarse)');
if (mQ?.media === '(pointer:coarse)') return !!mQ.matches;
if ('orientation' in window) return true;
return /\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(navigator.userAgent) ||
/\b(Android|Windows Phone|iPad|iPod)\b/i.test(navigator.userAgent);
}
导航器。不建议使用userAgent嗅探，因为它不可靠且变化很大。正如您在这里看到的:https://developers.whatismybrowser.com/useragents/explore/导航器。userAgent字符串在同一浏览器的不同版本之间可能有很大差异。
这篇MDN文章可以支持这种说法:https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent#avoiding_user_agent_detection。
上面的答案是对著名的MDN文章中建议的移动检测解决方案的重构。它首先依赖于特性检查，然后作为导航器的最后手段进行回退。userAgent嗅探。
编码快乐!＜3
像这样的怎么样?
if(
(screen.width <= 640) ||
(window.matchMedia &&
window.matchMedia('only screen and (max-width: 640px)').matches
)
){
// Do the mobile thing
}
