使用 Javascript 或 JQuery 检测手机

Question

我对平板电脑或移动设备不感兴趣。 就像用户使用手机访问页面一样。

我不是在寻找 100% 完美的东西。 但尽最大努力会很好。 如果我显示一个短信“a”标签链接，而您不在电话上……这不是世界末日，但我想尽我所能。

关于如何专门尝试过滤掉手机的任何想法，即使它不是 100% 完美？

谢谢

Answer 1

也许您可以采取几种方法来解决这个问题 - 两者都会做出大量假设并且充其量是不可靠的！

第一种方法是响应式媒体查询。 您可以假设手机的屏幕尺寸大于 x 且小于 y。 例如：

@media only screen and (min-width: 320px) and (max-width: 600px) {}

我会改进它以检查高度，并找到一些关于常见设备尺寸的统计数据，以在那里放置合理的断点。 您还需要考虑设备方向，当设备横向时，它会比平时更宽。

您的另一个选择是使用用户代理字符串。 Apple 和 Android 设备都特别说明它是否是设备的移动版本。 在 iOS 上，您可以查找短语“iphone”。 在 android 上，您可以查找“移动 safari”。 Windows 手机和其他设备可能有类似的检测，您需要使用模拟器来检查每个 UA 字符串，然后构建一个合适的正则表达式。

最后一种可能性，如果您对设备处理电话操作的能力特别感兴趣，可能是针对电话号码运行检测。

在页面上创建一个包含电话号码的元素。 在 iOS 中（在其他平台上可能类似），这将被修改，因此它会自动添加一个带有 tel: 的 href，然后是您的号码。 您可以在屏幕外绘制此元素，查看号码是否自动格式化，如果是，则假设是手机。 我想 iPad 也能做到这一点，但如果您启用了短信转发功能，iPad 也将允许您发送短信。

Answer 2

如果您想为最终用户操作视图，我建议在服务器端执行此操作，但是我编写了一个小型 JS 库，可以在一段时间后进行此类检查 - 看看： https : //github.com/dj10dj100 /what_browser

除此之外，您还可以使用 js 检查浏览器是否是移动设备： if(what.device.isMobile() == true){ //Mobile device }

Answer 3

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 // some code..
}