检测移动浏览器

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

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

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

当前回答

有一个简单的技巧来检测它是否是一个移动设备。检查ontouchstart事件是否存在:

function isMobile()
{
    return "ontouchstart" in window;
}

其他回答

我建议你去http://wurfl.io/看看

简而言之，如果你导入一个很小的JS文件:

<script type='text/javascript' src="//wurfl.io/wurfl.js"></script>

你将得到一个JSON对象，看起来像:

{
 "complete_device_name":"Google Nexus 7",
 "is_mobile":true,
 "form_factor":"Tablet"
}

(当然，这是假设你使用的是Nexus 7)，你将能够做以下事情:

if(WURFL.form_factor == "Tablet"){
    //dostuff();
}

这就是你要找的。

免责声明:我为提供这项免费服务的公司工作。谢谢。

如何:

if (typeof screen.orientation !== 'undefined') { ... }

.．.因为智能手机通常支持这个属性，而桌面浏览器不支持。在MDN中见。

编辑1:正如@Gajus指出的，窗口。Orientation现在已弃用，不应该使用。

编辑2:您可以使用实验屏幕。Orientation而不是弃用的window.orientation。在MDN中见。

编辑3:从窗口更改。朝向屏幕。朝向

IE10+解决方案仅使用matchMedia:

const isMobile = () => window.matchMedia('(max-width: 700px)').matches

isMobile()返回布尔值

//true / false
function isMobile()
{
   return (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ); 
}

您还可以按照本教程来检测特定的手机。请点击这里。

触摸屏和方向解决方案在某些个人电脑上无法使用。

一些笔记本电脑有触摸屏，希望将来会有更多。另外，虽然我无法亲自测试，但一些图形平板电脑可以作为屏幕使用，可以使用触摸屏。

探测方向也行不通。微软(Microsoft) Surface Books等一些个人电脑拥有可拆卸的屏幕，使其像平板电脑一样工作，包括定向支持。但它仍然是一台真正的个人电脑。

如果你必须检测和区分PC和移动，只需阅读用户代理。我也不喜欢它，但它仍然是最好的方式。

推荐文章