我正在寻找一个函数,返回一个布尔值,如果用户正在使用移动浏览器与否。
我知道我可以使用导航器。userAgent并使用regex编写该函数,但是用户代理对于不同的平台来说太复杂了。我怀疑匹配所有可能的设备是否容易,我认为这个问题已经解决了很多次,所以应该有某种完整的解决方案来完成这样的任务。
我正在看这个网站,但不幸的是,脚本是如此神秘,我不知道如何使用它为我的目的,这是创建一个返回true/false的函数。
我正在寻找一个函数,返回一个布尔值,如果用户正在使用移动浏览器与否。
我知道我可以使用导航器。userAgent并使用regex编写该函数,但是用户代理对于不同的平台来说太复杂了。我怀疑匹配所有可能的设备是否容易,我认为这个问题已经解决了很多次,所以应该有某种完整的解决方案来完成这样的任务。
我正在看这个网站,但不幸的是,脚本是如此神秘,我不知道如何使用它为我的目的,这是创建一个返回true/false的函数。
当前回答
这就是我用的。我知道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>
其他回答
返回'ontouchstart'在window && window.screen. availwidth < 768
这个怎么样,它扩展了上面的答案,但也检查了屏幕大小
我还没看到有人建议:
window.navigator.connection.type
这只存在于移动设备上,不存在于桌面浏览器上。检查该属性是否存在更简单,即if(window && window。Navigator && window.navigator.connection && window.navigator.connection.type) =>那么它是移动的
注意:这是实验性的
EDIT(07.2022):该功能被认为是一个潜在的跟踪漏洞,因此将从最新版本中删除。换句话说,不要用这个!
根据MDN关于使用用户代理进行浏览器检测的文章,建议尽可能避免这种方法,并建议使用其他方法,如特征检测。
然而,如果必须使用用户代理作为检测设备是否移动的手段,他们建议:
总而言之,我们建议在中的任何地方查找字符串“Mobi” 用户代理检测移动设备。
因此,这一行代码就足够了:
const isMobileDevice = window.navigator.userAgent.toLowerCase().includes("mobi");
(更新):
正如@ zenwolf在评论中建议的那样,使用正则表达式会更好:
const isMobileDevice = /Mobi/i.test(window.navigator.userAgent)
一旦元素获得焦点,就可以立即模糊它。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