我正在寻找一个函数,返回一个布尔值,如果用户正在使用移动浏览器与否。
我知道我可以使用导航器。userAgent并使用regex编写该函数,但是用户代理对于不同的平台来说太复杂了。我怀疑匹配所有可能的设备是否容易,我认为这个问题已经解决了很多次,所以应该有某种完整的解决方案来完成这样的任务。
我正在看这个网站,但不幸的是,脚本是如此神秘,我不知道如何使用它为我的目的,这是创建一个返回true/false的函数。
我正在寻找一个函数,返回一个布尔值,如果用户正在使用移动浏览器与否。
我知道我可以使用导航器。userAgent并使用regex编写该函数,但是用户代理对于不同的平台来说太复杂了。我怀疑匹配所有可能的设备是否容易,我认为这个问题已经解决了很多次,所以应该有某种完整的解决方案来完成这样的任务。
我正在看这个网站,但不幸的是,脚本是如此神秘,我不知道如何使用它为我的目的,这是创建一个返回true/false的函数。
当前回答
有一个简单的技巧来检测它是否是一个移动设备。检查ontouchstart事件是否存在:
function isMobile()
{
return "ontouchstart" in window;
}
其他回答
为了增加额外的控制层,我使用HTML5存储来检测它是使用移动存储还是桌面存储。如果浏览器不支持存储,我有一个移动浏览器名称数组,并将用户代理与数组中的浏览器进行比较。
这很简单。函数如下:
// Used to detect whether the users browser is an mobile browser
function isMobile() {
///<summary>Detecting whether the browser is a mobile browser or desktop browser</summary>
///<returns>A boolean value indicating whether the browser is a mobile browser or not</returns>
if (sessionStorage.desktop) // desktop storage
return false;
else if (localStorage.mobile) // mobile storage
return true;
// alternative
var mobile = ['iphone','ipad','android','blackberry','nokia','opera mini','windows mobile','windows phone','iemobile'];
for (var i in mobile) if (navigator.userAgent.toLowerCase().indexOf(mobile[i].toLowerCase()) > 0) return true;
// nothing found.. assume desktop
return false;
}
以下是我对这个问题的重新思考的解决方案。仍然不完美。唯一真正的解决方案是设备制造商开始认真对待“移动”和“平板”用户代理字符串。
window.onload = userAgentDetect;
function userAgentDetect() {
if(window.navigator.userAgent.match(/Mobile/i)
|| window.navigator.userAgent.match(/iPhone/i)
|| window.navigator.userAgent.match(/iPod/i)
|| window.navigator.userAgent.match(/IEMobile/i)
|| window.navigator.userAgent.match(/Windows Phone/i)
|| window.navigator.userAgent.match(/Android/i)
|| window.navigator.userAgent.match(/BlackBerry/i)
|| window.navigator.userAgent.match(/webOS/i)) {
document.body.className += ' mobile';
alert('True - Mobile - ' + navigator.userAgent);
} else {
alert('False - Mobile - ' + navigator.userAgent);
}
if(window.navigator.userAgent.match(/Tablet/i)
|| window.navigator.userAgent.match(/iPad/i)
|| window.navigator.userAgent.match(/Nexus 7/i)
|| window.navigator.userAgent.match(/Nexus 10/i)
|| window.navigator.userAgent.match(/KFAPWI/i)) {
document.body.className -= ' mobile';
document.body.className += ' tablet';
alert('True - Tablet - ' + navigator.userAgent);
} else {
alert('False - Tablet - ' + navigator.userAgent);
}
}
当Nexus 7平板电脑只有Android UA字符串时会发生什么?首先,Mobile变成true,之后Tablet也变成true,但是Tablet会从body标签中删除Mobile UA字符串。
CSS:
body.tablet { background-color: green; }
body.mobile { background-color: red; }
为开发添加了警报线。Chrome控制台可以模拟许多手持设备。测试。
编辑:
不要使用这种方法,而是使用特征检测。市场上有如此多的设备和品牌,瞄准一个品牌永远不是正确的解决方案。
这是我在任何情况下发现的最好的工作方法。
const deviceMotionAvailable = Array.isArray(navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/iPhone/i))
有一个简单的技巧来检测它是否是一个移动设备。检查ontouchstart事件是否存在:
function isMobile()
{
return "ontouchstart" in window;
}
我还没看到有人建议:
window.navigator.connection.type
这只存在于移动设备上,不存在于桌面浏览器上。检查该属性是否存在更简单,即if(window && window。Navigator && window.navigator.connection && window.navigator.connection.type) =>那么它是移动的
注意:这是实验性的
EDIT(07.2022):该功能被认为是一个潜在的跟踪漏洞,因此将从最新版本中删除。换句话说,不要用这个!