我正在寻找一个函数，返回一个布尔值，如果用户正在使用移动浏览器与否。
我知道我可以使用导航器。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
其他回答
这是一个比匹配更有效的userAgent解决方案…
function _isMobile(){
// if we want a more complete list use this: http://detectmobilebrowsers.com/
// str.test() is more efficent than str.match()
// remember str.test is case sensitive
var isMobile = (/iphone|ipod|android|ie|blackberry|fennec/).test
(navigator.userAgent.toLowerCase());
return isMobile;
}
我认为这才是真正的保护方案。
测试在Chrome和Firefox，移动和桌面。
var ___isMobileDevice;
const isMobileDeviceCheck = () => {
const mobileOsRegExp = "(Android|webOS|iPhone|iPod)";
if(screen.width < 500 || navigator.userAgent.match('/'+mobileOsRegExp+'/i')) {
___isMobileDevice = true;
}
if (___isMobileDevice) {
if (typeof window.orientation === "undefined") {
___isMobileDevice = false;
}
}
if (typeof navigator.userAgentData != "undefined" && !navigator.userAgentData.mobile) {
___isMobileDevice = false;
}
if ( typeof window.orientation !== "undefined" && ___isMobileDevice ) {
if (window.navigator.maxTouchPoints > 1 && (navigator.userAgentData.mobile || localStorage.mobile || 'ontouchstart' in document)) {
// mobile device found
console.log('Is mobile device!');
}
}
}
window.onresize = () => {
isMobileDeviceCheck();
}
isMobileDeviceCheck();
PS:作为浏览器扩展的Useragent切换器不能用这段代码欺骗你。
根据MDN关于使用用户代理进行浏览器检测的文章，建议尽可能避免这种方法，并建议使用其他方法，如特征检测。
然而，如果必须使用用户代理作为检测设备是否移动的手段，他们建议:
总而言之，我们建议在中的任何地方查找字符串“Mobi” 用户代理检测移动设备。
因此，这一行代码就足够了:
const isMobileDevice = window.navigator.userAgent.toLowerCase().includes("mobi");
(更新):
正如@ zenwolf在评论中建议的那样，使用正则表达式会更好:
const isMobileDevice = /Mobi/i.test(window.navigator.userAgent)
IE10+解决方案仅使用matchMedia:
const isMobile = () => window.matchMedia('(max-width: 700px)').matches
isMobile()返回布尔值
我遇到过一些情况，上面的答案对我不起作用。所以我想到了这个。可能对某人有帮助。
if(/iPhone|iPad|iPod|Android|webOS|BlackBerry|Windows Phone/i.test(navigator.userAgent)
|| screen.availWidth < 480){
//code for mobile
}
这取决于您的用例。如果你专注于屏幕使用屏幕。availWidth，或者你可以使用document.body. clientwidth如果你想基于document进行渲染。
