检测移动浏览器

我正在寻找一个函数，返回一个布尔值，如果用户正在使用移动浏览器与否。

我知道我可以使用导航器。userAgent并使用regex编写该函数，但是用户代理对于不同的平台来说太复杂了。我怀疑匹配所有可能的设备是否容易，我认为这个问题已经解决了很多次，所以应该有某种完整的解决方案来完成这样的任务。

我正在看这个网站，但不幸的是，脚本是如此神秘，我不知道如何使用它为我的目的，这是创建一个返回true/false的函数。

当前回答

根据MDN关于使用用户代理进行浏览器检测的文章，建议尽可能避免这种方法，并建议使用其他方法，如特征检测。

然而，如果必须使用用户代理作为检测设备是否移动的手段，他们建议:

总而言之，我们建议在中的任何地方查找字符串“Mobi” 用户代理检测移动设备。

因此，这一行代码就足够了:

const isMobileDevice = window.navigator.userAgent.toLowerCase().includes("mobi");

(更新):

正如@ zenwolf在评论中建议的那样，使用正则表达式会更好:

const isMobileDevice = /Mobi/i.test(window.navigator.userAgent)

其他回答

这是我在任何情况下发现的最好的工作方法。

const deviceMotionAvailable = Array.isArray(navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/iPhone/i))

我通常发现，检查只在移动视图中可见的特定元素(比如汉堡图标)的可见性这一更简单的方法效果很好，而且比依赖非常复杂的正则表达式安全得多。这将很难测试100%的工作。

function isHidden(el) {
   return (el.offsetParent === null);
}

没有完美的解决方案来检测JS代码是否在移动浏览器上执行，但以下两个选项应该在大多数情况下都有效。

选项1:浏览器嗅探

这个特殊的浏览器嗅探代码是一个名为isMobile的库的代码。

选项2:window.orientation

测试如果窗口。定义方向:

var isMobile = window.orientation > -1; alert（isMobile ？“移动设备”：“非移动设备”）;

Note

并不是所有的触屏设备都是移动的，反之亦然。所以，如果你想实现一些专门针对触摸屏的东西，你不应该测试你的浏览器是否在移动设备上运行，而应该测试设备是否支持触摸屏:

var hasTouchscreen = 'ontouchstart'在窗口; 警报(hasTouchscreen ?'有触摸屏':'没有触摸屏');

这里有一个简单的解决方案，来自facebook的弹弓

const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
if (isMobile) {
  /* your code here */
}

我还没看到有人建议:

window.navigator.connection.type

这只存在于移动设备上，不存在于桌面浏览器上。检查该属性是否存在更简单，即if(window && window。Navigator && window.navigator.connection && window.navigator.connection.type) =>那么它是移动的

注意:这是实验性的

EDIT(07.2022):该功能被认为是一个潜在的跟踪漏洞，因此将从最新版本中删除。换句话说，不要用这个!

推荐文章